element-ui按需引入修改.babelrc问题

element-ui提示需要将 .babelrc 修改为：

"presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

我的vue-cli版本3.9.3，创建项目后文件目录中只有babel.config.js文件。于是修改为

module.exports = {
  presets: ["@vue/app", ["es2015", { modules: false }]],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

修改后，重新npm run serve，报错Error: Cannot find module ‘babel-preset-es2015’。安装@babel/preset-env

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

并修改.babel.config.js文件如下，保存后再次运行成功：

module.exports = {
  presets: ["@vue/app", ["@babel/preset-env", { modules: false }]],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

备注：其中尝试了使用babel-preset-es2015，试用以下命令但是会报错。后改用@babel/preset-env，此文章比较了两者，可参考。

npm install --save-dev babel-preset-es2015

https://github.com/Gesj-yean/vue-demo-collection 记录了更多优秀插件的使用方法。有时间的同学请看我的置顶博客，可太感谢啦。