LoginSignup
2

More than 5 years have passed since last update.

Typescriptのコンパイル環境を作成する(webpack 4.0.0)

Last updated at Posted at 2018-02-26

webpackでtypescriptをコンパイルする

Typescriptを勉強したかったので、webpackを使って環境を構築することにした。
何番煎じかわからないが、忘備録としてアウトプット。

npmから必要なmoduleを持ってくる

まずは

$ yarn init

moduleをinstall

$ yarn add -D ts-loader typescript webpack webpack-cli

tsconfig.jsonを作成する

includes(); とかも使いたいのでlibdomes2017を追加

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出来るようにするかもしれない

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2