vue2 打包es5

要将 Vue2 打包成 ES5，需要使用 Babel 转译器和相关的插件。以下是一些基本的步骤：

安装必要的依赖：

npm install --save-dev @babel/core @babel/preset-env babel-loader

在项目根目录下创建一个 .babelrc 文件，内容如下：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

这里使用了 @babel/preset-env，它可以根据目标环境自动选择需要的插件和转译规则。useBuiltIns 设置为 usage，可以让 Babel 自动检测代码中使用的 ES6+ 特性并按需引入对应的 polyfill。corejs 指定了使用的 polyfill 版本。

在 Webpack 配置文件中添加 babel-loader：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

这里只对 .js 文件进行转译，使用 babel-loader 处理。

配置 Vue Loader 使用 Babel 转译器：

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          js: {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: 3
                  }
                ]
              ]
            }
          }
        }
      }
    }
  ]
}

这里通过 vue-loader 处理 .vue 文件，需要对其中的 <script> 部分进行转译。因此在 loaders 中配置了使用 babel-loader 处理。

完成以上步骤后，运行 npm run build 即可将 Vue2 打包成 ES5