提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

webpack5用babel-loader将es6的js代码转换成es5

ES6JS代码 转换成 loader babel Es5
2023-09-11 14:19:39 时间

-

例如项目中用到的promise  async  await这些es6语法，在现代浏览器是支持的，但是在一些老的浏览器就不支持，所以就需要用到babel-loader将es6语法转化为es5语法，使得更老的浏览器也支持我们的代码。

需要下载3个插件

npm install babel-loader @babel/core @babel/preset-env -D

 

babel-loader:在webpack里用babel解析es6的桥梁

@babel/core: babel的核心模块

@babel/preset-env: babel预设，一组babel插件的集合

webpack.config.js配置

module: { // 模块加载配置
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 把node_modules排除在外，node_modules中的js是不需要转化
        use: {
          loader: 'babel-loader',
          options: { // 配置项
            presets: ['@babel/preset-env'],
          }
        }
      }
    ]
  },

 如果报错_regeneratorRuntime没找到，就安装

@babel/runtime 这是babel运行的时候需要的环境

@babel/plugin-transform-runtime  这个插件会在用的regeneratorRuntime时自动require导包，然后编译的时候会使用它

npm install @babel/runtime  @babel/plugin-transform-runtime -D

因为我的没报错，就没单独装这俩插件，

如果报错了，可以装上这俩插件，然后在配置上加上去

{
        test: /\.js$/,
        exclude: /node_modules/, // 把node_modules排除在外，node_modules中的js是不需要转化
        use: {
          loader: 'babel-loader',
          options: { // 配置项
            presets: ['@babel/preset-env'],
            plugins: [
              ['@babel/plugin-transform-runtime']
            ]
          }
        }
      }

 

 ===

{
        test: /\.js$/,
        exclude: /node_modules/, // 把node_modules排除在外，node_modules中的js是不需要转化
        use: {
          loader: 'babel-loader',
          options: { // 配置项
            presets: [
              '@babel/preset-env',
              {
                targets: [
                  'last 1 version', // 匹配浏览器的最新版本
                  '> 1%', // 全球使用者1%以上的浏览器
                ],
                useBuiltIns: 'usage', // 按需引入转化js所需的垫片
                corejs: 3
              },
            ]
          }
        }
      }

 

 

-

相关文章