用webpack编译typescript

2019-10-28 本文已影响0人 BigDipper

用typescript来搞开发挺方便，不过最终需要编译成javascript才能运行，这就有点绕弯。如果用webpack，再配置点儿插件，就能省不少事儿。

首先，全局安装typescript：

npm install -g typescript

mkdir demo

cd demo

npm init -y

生成tsconfig.json配置文件，生成的文件位于项目的根目录：

tsc --init

编辑tsconfig.json配置文件，修改如下配置项：

指定ECMAScript目标版本

"target": "es5"

指定生成哪个模块系统代码

"module": "es6"

编译过程中需要引入的库文件的列表

针对不同的项目需求，引入的库文件可能不同。
"lib": ["es2015", "dom"]

允许编译javascript文件

"allowJs": true

设置模块解析策略

"moduleResolution": "node"

编辑完成后，再安装webpack和webpack-cli，这两个库建议本地安装，不要全局安装：

npm install --save-dev webpack webpack-cli

由于webpack自身只理解JavaScript，因此要处理.ts文件，我们还要安装ts-loader库，并在本地安装typescript：

npm install --save-dev typescript ts-loader

完成上述动作后，接下来在项目根目录创建webpack.config.js文件，并编辑它，设置配置属性：

const path = require('path');

module.exports = {
  entry: './src/demo_02.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/
    }]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
};

我们还要编辑package.json文件，添加运行webpack的脚本：

...
"scripts": {
  "build": "webpack"
},
...

至此，我们就可以在命令行窗口运行webpack，对项目的文件进行编译和打包：

npm run build

补充一下：
也可以安装awesome-typescript-loader库来代替ts-loader库，它俩的功能是一样的，但据说awesome-typescript-loader比ts-loader编译.ts文件速度更快。

安装awesome-typescript-loader库

npm install --save-dev awesome-typescript-loader

在webpack.config.js文件中设置awesome-typescript-loader：

const path = require('path');
const { CheckerPlugin } = require('awesome-typescript-loader')

module.exports = {
  entry: './src/demo_02.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'awesome-typescript-loader',
      exclude: /node_modules/
    }]
  },
  plugins: [
    new CheckerPlugin()
  ],
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
};

用webpack编译typescript

猜你喜欢

热点阅读