webpack + typescript + babel打包*.min.js文件的环境配置

将多个*.ts文件打包成一个*.min.js文件的开发配置

1、初始化

npm init

新建以下文件目录：

2、安装依赖：

"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"babel-loader": "^8.0.6",
"ts-loader": "^6.0.3",
"typescript": "^3.5.2",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.4"
},
"dependencies": {
"@babel/polyfill": "^7.4.4",
"core-js": "2"
}

3、tsconfig.json

{
"compileOnSave": false,
"compilerOptions": {
"sourceMap": true,
"noImplicitAny": false,
"noUnusedParameters": true,
"moduleResolution": "node",
"module": "esnext",
"target": "esnext",
"baseUrl": "./"
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules"]
}

参数含义参考https://www.tslang.cn/docs/handbook/compiler-options.html

4、babelrc

{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": "2"
}
]
]
}

useBuiltIns:"usage" 将会按需引入babel/polyfill。

babel7已经废弃了@babel/preset-stage-0等preset。

具体参考https://www.babeljs.cn/docs/babel-preset-env

5、webpack.config.js

const path = require("path");

module.exports = {
mode: "production",
entry: "./src",
output: {
path: path.resolve(__dirname, "dist"),
filename: "ma.min.js",
library: "MA",
libraryTarget: "umd"
},
module: {
rules: [
{
test: /\.ts$/,
use: ["babel-loader", "ts-loader"],
exclude: [path.resolve(__dirname, "node_modules")]
}
]
},
resolve: {
extensions: [".ts", ".js"]
}
// devtool: "inline-source-map"
};

ts文件将会经过ts-loader转成es6，再由babel-loader转成es5并加入polyfill

参数含义参考https://webpack.docschina.org/configuration/

6、package.json中定义script

"scripts": {
"compile": "webpack"
},

7、执行打包

比如我们在src下定义index.ts

const testFunc = (num: number) => {
const arr: number[] = [1, 2, 3, 4];
return arr.includes(num);
};

export { testFunc };

其中使用了箭头函数和ES7方法includes。

执行打包：

打包完成，此时在dist下已经打包出了ma.min.js文件，其中includes方法也被做了polyfill处理。

8、为什么使用了ts-loader后还要使用babel-loader

ts-loader也可以直接打包成es5语法，但不会做polyfill，况且如果项目依赖babel生态中的其他插件，也需要使用babel-loader.