webpack4从0开始构建前端单页项目(6)用babel-loader处理js㈢babel-polyfill
babel-loader 只能编译 ES6+以上版本的新增语法，比如箭头函数等，对于 ES6+新增的 API 则没法编译，这时候就可以使用 babel-polyfill 了。babel-polyfill 生成一个全局对象 把 ES6 新增的 API 转换成 ES5。
安装 babel-polyfill
cnpm i babel-polyfill -S # 生产依赖 -S表示会把 babel/polyfill 打包进生成的代码中
项目结构
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/preset-env": "^7.11.5",
"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"
},
"dependencies": {
"babel-polyfill": "^6.26.0"
}
使用babel-polyfill
babel-polyfill可以直接通过入口文件使用
// main.js
import "babel-polyfill"; // 使用babel-polyfill;
console.log("入口文件");
在webpack配置文件中使用
//webpack.config.js
module.exports = {
entry: ["babel-polyfill", "./main.js"], // 在入口文件中使用babel-polyfill
}
babel-polyfill参考: https://babel.docschina.org/docs/en/babel-polyfill
开发工具 |
