最简单的babel+webpack配置

发布时间：2020-12-15 05:34:50 所属栏目：Java 来源：网络整理

导读：首先先介绍一下2个重要的库：core-js 和 regenerator core-js core-js 是用于 JavaScript 的组合式标准化库，它包含 es5 （e.g: object.freeze）,es6的 promise，symbols,collections,iterators,typed arrays， es7+提案等等的 polyfills 实现。也就是说，它

首先先介绍一下2个重要的库：core-js 和 regenerator

core-js

core-js 是用于 JavaScript 的组合式标准化库，它包含 es5 （e.g: object.freeze）,es6的 promise，symbols,collections,iterators,typed arrays， es7+提案等等的 polyfills 实现。也就是说，它几乎包含了所有 JavaScript 最新标准的垫片。不过为什么它不把 generator 也实现了... ??

regenerator

它是来自于 facebook 的一个库。主要就是实现了 generator/yeild， async/await。

下面我们看看配置

package.json

{
  "name": "babel-test","main": "main.js","scripts": {
    "start": "webpack"
  },"devDependencies": {
    "@babel/cli": "^7.5.5","@babel/core": "^7.5.5","@babel/preset-env": "^7.5.5","babel-loader": "^8.0.6","webpack": "^4.38.0","webpack-cli": "^3.3.6"
  },"dependencies": {
    "core-js": "^3.1.4","regenerator-runtime": "^0.13.3"
  }
}

@babel/cli @babel/core 是最基础的2个依赖，结合使用可以把js代码解析成AST，传给plugins，然后再反解析会来编译结果

@babel/preset-env 是babel plugins的预设，它能根据配置，很智能的配置需要的plugins

webpack webpack-cli babel-loader 就是配合babel使用的模块管理器的相关依赖了

core-js?regenerator-runtime 上面其实已经介绍过了，是作为polyfill，供@babel/preset-env使用（适当的配置，可以把这2个库的代码，按需打入bundle）

babel.config.js

module.exports = {
  presets: [
    [
      "@babel/preset-env",{
        "corejs": "3",// 指定core-js的版本，2或者3，这里我们用最新版3
        "useBuiltIns": "usage",// usage是最佳实践，会按需把core-js和regenerator引入（所谓按需就是按下面的target和编译的js用到的es6语法来判断）
        "targets": { // 目标浏览器
          "chrome": "58","ie": "9",}
      },]
  ],　exclude: [/node_modules/] // 不要编译node_modules，不然会出一些奇奇怪怪的问题
};

webpack配置:

const path = require(‘path‘);

module.exports = {
  mode: "development",entry: {
    app: ‘./main.js‘
  },output: {
    filename: ‘bundle.js‘,path: path.resolve(__dirname,‘./dist‘),},module: {
    rules: [
      {
        test: /.js$/,use: [‘babel-loader‘],// exclude: /node_modules/ // exclude写在babel.config.js，这里就可以不写了
      }
    ]
  }
};

主要就是配置用babel-loader

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!