526互联

vue webpack 配置babel es6转化转化es5

发布时间 2023-12-07 11:47:18作者: 朱丽叶

1、安装相关依赖

npm i -D @babel/core@7.12.3
npm i -D @babel/preset-env@7.12.1
npm i -D babel-loader@8.0.6


// 语法中有 async await 等
npm i -D @babel/plugin-transform-runtime@7.23.4
npm i -D @babel/runtime@7.23.5

2、babel.config.js

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@babel/preset-env', '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    '@babel/plugin-transform-runtime'
  ],
}

3、vue.config.js

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
              // plugins: [
              //   ['@babel/plugin-transform-runtime']
              // ]
            }
          }
        }
      ]
    }
  }
}