webpack4从0开始构建前端单页项目(7)用babel-loader处理js㈣transform-runtime

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"] 
     ]
  ]
}

开发工具