IDE・エディタ
手慣れたエディタか、TypeScript をサポートしている WebStorm が便利。
TypeScript をインストールする
npm install -g typescript
tsd と、必要となる d.ts をインストールする
TypeScript の開発で外部ライブラリを利用する場合、型定義ファイル (d.ts) が必要となる。
型定義ファイルは https://github.com/DefinitelyTyped/tsd で管理されているが、
1つずつ落としてくるのも面倒なので、管理ツールである tsd をインストールする。
npm install -g tsd
Chrome Extension 関連の d.ts は chrome という名称で登録されている。
以下のコマンドでインストール可能。
tsd query chrome --resolve --overwrite --save --action install
インストールに成功すると、
- tsd.json (tsd 設定ファイル)
- typings (d.ts 配置ディレクトリ)
が作成される。
その他、開発時に必要なものが出てきたら都度インストールしていけば良い。
Bower をインストールする
Bower を利用することで、Extension で利用するCSS/JSライブラリを簡単にインストール・配置することが出来る。
開発に必須ではないが、使ったほうが楽。
npm install -g bower
bower init で設定ファイルを生成し、必要なライブラリをインストールしていけば良い。
$ bower init
[?] name: hoge
[?] version: 0.0.0
[?] description:
[?] main file:
...
bower install で配置されるディレクトリ変更したい場合は、.bowerrc を作成しておく。
{
"directory": "src/bower_components"
}
Grunt をインストールする
TypeScript のコンパイル、crx ファイルのビルドのため、Grunt をインストールする。
npm install -g grunt-cli
package.json を用意して、npm install する。
{
"name": "xxx",
"description": "",
"version": "0.0.1",
"engines": {
"node": ">=0.10.8"
},
"dependencies": {},
"devDependencies": {
"grunt": "0.4.5",
"grunt-cli": "0.1.13",
"grunt-contrib-watch": "^0.6.1",
"grunt-crx": "^0.3.3",
"grunt-typescript": "^0.3.8"
}
}
Gruntfile.js を用意する。
開発時は grunt debug、ビルド時は grunt を実行する。
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
manifest: grunt.file.readJSON('src/manifest.json'),
watch: {
scripts: {
files: ['src/**/*.ts', 'src/**/*.html'],
tasks: ['typescript']
}
},
typescript: {
base: {
src: ['src/scripts/**.ts'],
dest: 'src/scripts/',
options: {
module: 'commonjs',
target: 'es5',
basePath: 'src/scripts'
}
}
},
crx: {
production: {
'src': 'src/',
'dest': '<%= pkg.name %>.crx',
'privateKey': '<%= pkg.name %>.pem'
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-typescript');
grunt.loadNpmTasks('grunt-crx');
grunt.registerTask('default', [
'typescript',
'crx'
]);
grunt.registerTask('debug', [
'typescript',
'watch'
]);
};
ディレクトリ構成例
本投稿に記載されているサンプルは、以下のディレクトリ構成を前提とした設定例となっている。
├── src
│ ├── _locales/...
│ ├── bower_components/...
│ ├── css/...
│ ├── images/...
│ ├── scripts/...
│ ├── manifest.json
│ └── xxx.html
│
├── typings/...
├── .bowerrc
├── bower.json
├── Gruntfile.js
├── package.json
└── tsd.json