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

注意点

注: 今は 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