webpack中处理更高级的es6或者es7语法

╰半夏微凉° 2021-10-23 23:48 341阅读 0赞

**在 webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候就需要借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把高级语法转为低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中**  
\*\* 通过 Babel ，可以帮我们将 高级的语法转换为 低级的语法\*\*

1.  在 webpack 中，可以运行如下两套 命令，安装两套包，去安装 Babel 相关的loader功能：

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

npm install babel-loader babel-core babel-preset-env webpack

1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D：转换  
1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D：语法插件  
两套一起i’zhuang

1.  打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个 新的 匹配规则：  
    （在 webpack 配置对象中，需要添加 babel-loader 到 module 的 loaders 列表中，像下面这样：）

module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
               presets: ['@babel/preset-env'],
              plugins: [require('@babel/plugin-transform-object-rest-spread')]
            }
          }
        }
      ]
    }

注意： 在配置 babel 的 loader规则的时候，必须 把 node\_modules 目录，通过 exclude 选项排除掉：原因有俩：  
1 如果 不排除 node\_modules， 则Babel 会把 node\_modules 中所有的 第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；  
2 哪怕最终Babel 把 所有 node\_modules 中的JS转换完毕了，但是项目也无法正常运行！

1.  在项目的 根目录中，新建一个 叫做 .babelrc 的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范： 不能写注释，字符串必须用双引号  
    在 .babelrc 写如下的配置： 可把 preset 翻译成 【语法】 的意思.

{
                 "presets": ["env", "stage-0"],
                "plugins": ["transform-runtime"]
           }

1.  目前，我们安装的 babel-preset-env, 是比较新的ES语法， 之前， 我们安装的是 babel-preset-es2015, 现在，出了一个更新的 语法插件，叫做 babel-preset-env ，它包含了 所有的 和 es\*\*\*相关的语法.
2.  babel报错汇总[https://www.jb51.net/article/161089.htm][https_www.jb51.net_article_161089.htm]

[https_www.jb51.net_article_161089.htm]: https://www.jb51.net/article/161089.htm