generator-chrome-extension-kickstartをtypescriptで使えるようにする

More than 1 year has passed since last update.


注意点

: 今は generator-chrome-extension-kickstart-typescript が公開されているようです。

一応記載は残していますが、上記を使うのが手っ取り早いですね


導入の仕方

generator-chrome-extension-kickstartを導入します

$ npm install -g yo generator-chrome-extension-kickstart

プロジェクトを作成

$ mkdir someproject && cd $_

$ yo chrome-extension-kickstart .

適当に答えてプロジェクトを作成します


typescript開発環境を追加

必要なツールをインストール

$yarn add tslint ts-loader @types/chrome --dev

以下のようにファイルを修正します


someproject/tasks/scripts.js

import gulp from 'gulp'

import gulpif from 'gulp-if'
import { log, colors } from 'gulp-util'
import named from 'vinyl-named'
import webpack from 'webpack'
import gulpWebpack from 'webpack-stream'
import plumber from 'gulp-plumber'
import livereload from 'gulp-livereload'
import args from './lib/args'

const ENV = args.production ? 'production' : 'development'

gulp.task('scripts', (cb) => {
return gulp.src(['app/scripts/*.js', 'app/scripts/*.ts', 'app/scripts/*.tsx'])
.pipe(plumber({
errorHandler() {
// Webpack will log the errors
}
}))
.pipe(named())
.pipe(gulpWebpack({
devtool: args.sourcemaps ? 'inline-source-map' : false,
watch: args.watch,
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(ENV)
},
'__ENV__': JSON.stringify(ENV),
'__VENDOR__': JSON.stringify(args.vendor),
'__CREATED__': JSON.stringify((new Date()).toString())
})
].concat(args.production ? [
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.ModuleConcatenationPlugin()
] : [
// new webpack.optimize.ModuleConcatenationPlugin()
]),
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
enforce: 'post'
}]
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
modules: [
"node_modules/",
"app/scripts/"
]
},
}, webpack,
(err, stats) => {
if (err) return
log(`Finished '${colors.cyan('scripts')}'`, stats.toString({
chunks: false,
colors: true,
cached: false,
children: false
}))
}))
.pipe(gulp.dest(`dist/${args.vendor}/scripts`))
.pipe(gulpif(args.watch, livereload()))
})


各種configファイルも作っておきます

$ tsc --init

$ tslint --init

コンフィグ内容の例


tsconfig.json



{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"noImplicitUseStrict": true,
"noImplicitReturns": true,
"strictNullChecks": true,
"jsx": "react",
"lib": ["dom", "es2017"]
}
}



tslint.json

{

"rules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"indent": [
true,
"spaces"
],
"no-duplicate-variable": true,
"no-eval": true,
"no-internal-module": true,
"no-trailing-whitespace": true,
"no-unsafe-finally": true,
"no-var-keyword": true,
"one-line": [
true,
"check-open-brace",
"check-whitespace"
],
"quotemark": [
true,
"single"
],
"semicolon": [
true,
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": [
true,
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}


参考: http://qiita.com/ABCanG1015/items/10750e3fb8453d5e0944