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