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

最新推荐文章于 2023-06-13 14:41:56 发布

喵姑娘呀

最新推荐文章于 2023-06-13 14:41:56 发布

阅读量766

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack babel

本文链接：https://blog.youkuaiyun.com/weixin_43389331/article/details/99691792

webpack 专栏收录该内容

4 篇文章

订阅专栏

在webpack默认配置下，无法处理全部ES6和ES7语法，需要借助Babel及其loader。安装`babel-core`, `babel-loader`, `babel-plugin-transform-runtime`, `babel-preset-env`和`babel-preset-stage-0`。在webpack配置的`module.rules`中添加匹配规则，并通过`exclude`排除`node_modules`以避免性能问题。创建`.babelrc`文件配置Babel，使用`babel-preset-env`涵盖所有ES相关语法。了解更多Babel错误处理：https://www.jb51.net/article/161089.htm。" 133678993,19671617,Linux环境下C语言实现数字排序,"['Linux开发', 'C语言编程', '算法实现', '排序方法']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在 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

打开 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转换完毕了，但是项目也无法正常运行！

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

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

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