transform-runtime和babel-polyfill都是用于引入ES6+以后新增的的API,不同的babel-polyfill是生成一个全局对象 把 ES6 新增的 API 转换成 ES5,而transform-runtime生成一个局部对象,用到哪些API则编译哪些API。
安装 transform-runtime
cnpm install babel-loader @babel/core @babel/preset-env -D
cnpm i @babel/plugin-transform-runtime @babel/runtime -D
项目结构
project
| .babelrc # babel-loader配置文件
| .editorconfig # 配置格式化插件
| package.json # 项目需要的依赖
| webpack.config.js # webpack配置文件
|
+---public
| index.html # 用于打包生成 .html 文件的模板
|
---src
main.js # webpack的入口文件
依赖的模块(package.json)
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/plugin-transform-runtime": "^7.11.5",
"@babel/preset-env": "^7.11.5",
"@babel/runtime": "^7.11.2",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.5.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
.babelrc 配置文件(使用transform-runtime)
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": [">1%", "last 3 version"]
}
}
],
"plugins": [
["@babel/transform-runtime"]
]
]
}