webpackでtypescriptをコンパイルする
Typescriptを勉強したかったので、webpackを使って環境を構築することにした。
何番煎じかわからないが、忘備録としてアウトプット。
npmから必要なmoduleを持ってくる
まずは
$ yarn init
moduleをinstall
$ yarn add -D ts-loader typescript webpack webpack-cli
tsconfig.jsonを作成する
includes();
とかも使いたいのでlib
にdom
とes2017
を追加
tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"module": "es2015",
"lib": [
"dom",
"es2017"
],
"moduleResolution": "node",
"experimentalDecorators": true
}
}
webpack.config.jsを作成する
entry
とかのpathについては、適当に変更してください。
webpack.config.js
/**
* @file webpack.config.js
*/
module.exports = {
mode : 'development',
entry : './src/js/main.ts',
output : {
path : `${__dirname}/dist/js`,
filename: 'bundle.js'
},
module : {
rules: [
{
test: /\.ts$/,
use : 'awesome-typescript-loader'
}
]
},
resolve: {
extensions: [
'.ts'
]
}
};
package.jsonにscripts
を追記
package.json
{
// ~ 省略
"scripts": {
"build": "npm run clean && webpack --mode production",
"dev": "webpack",
"clean": "rm -rf ./dist"
},
"devDependencies": {
"ts-loader": "^4.0.0",
"typescript": "^2.7.2",
"webpack": "^4.0.1",
}
}
npm run build
ってやってコンパイル...できると思ったが、何やらエラーが...
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
CLIのパッケージが別れたとのことなので、指示どおりに yarn add -D webpack-cli
を叩く。
/src/js/main.ts
(function(){
const hoge: string = 'hoge';
alert hoge;
});
が
dist/js/bundle.js
(function() {
var hoge = 'hoge';
alert(hoge);
});
コンパイルできたくさい。
このままだと開発しにくそうなので、今度はwebpack-dev-server
とかを使って、hot reload出来るようにするかもしれない。