用typescript來搞開發(fā)挺方便，不過最終需要編譯成javascript才能運(yùn)行，這就有點(diǎn)繞彎。如果用webpack，再配置點(diǎn)兒插件，就能省不少事兒。
- 首先，全局安裝
typescript：
npm install -g typescript
- 然后，新建一個(gè)項(xiàng)目目錄：
mkdir demo
cd demo
- 在demo目錄中，初始化項(xiàng)目：
npm init -y
- 生成
tsconfig.json配置文件，生成的文件位于項(xiàng)目的根目錄：
tsc --init
- 編輯
tsconfig.json配置文件，修改如下配置項(xiàng)：
- 指定ECMAScript目標(biāo)版本
"target": "es5"
- 指定生成哪個(gè)模塊系統(tǒng)代碼
"module": "es6"
- 編譯過程中需要引入的庫文件的列表
針對不同的項(xiàng)目需求，引入的庫文件可能不同。
"lib": ["es2015", "dom"]
- 允許編譯javascript文件
"allowJs": true
- 設(shè)置模塊解析策略
"moduleResolution": "node"
- 編輯完成后，再安裝
webpack和webpack-cli，這兩個(gè)庫建議本地安裝，不要全局安裝：
npm install --save-dev webpack webpack-cli
- 由于
webpack自身只理解JavaScript，因此要處理.ts文件，我們還要安裝ts-loader庫，并在本地安裝typescript：
npm install --save-dev typescript ts-loader
- 完成上述動(dòng)作后，接下來在項(xiàng)目根目錄創(chuàng)建
webpack.config.js文件，并編輯它，設(shè)置配置屬性：
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文件，添加運(yùn)行webpack的腳本：
...
"scripts": {
"build": "webpack"
},
...
- 至此，我們就可以在命令行窗口運(yùn)行
webpack，對項(xiàng)目的文件進(jìn)行編譯和打包：
npm run build
補(bǔ)充一下：
也可以安裝awesome-typescript-loader庫來代替ts-loader庫，它倆的功能是一樣的，但據(jù)說awesome-typescript-loader比ts-loader編譯.ts文件速度更快。
- 安裝
awesome-typescript-loader庫
npm install --save-dev awesome-typescript-loader
- 在
webpack.config.js文件中設(shè)置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' ]
},
};
