纳速健身

标题: webpack4从0开始构建前端单页项目(6)用babel-loader处理js㈢babel-polyfill [打印本页]

作者: awagink 时间: 2020-11-27 19:39
标题: webpack4从0开始构建前端单页项目(6)用babel-loader处理js㈢babel-polyfill
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

开发工具

欢迎光临纳速健身 (https://www.nasue.com/)