element-ui按需引入報錯Cannot find module 'babel-preset-es2015' 及多組件引入報錯

一、elementUI按需引入報錯。Error: Cannot find module 'babel-preset-es2015' from 'XXX'

根據elementUI官方文檔，按需引入組件。

第一步：安裝插件

npm install babel-plugin-component -D

　

第二步: 將 .babelrc 修改為：

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

但是報錯了。 Error: Cannot find module 'babel-preset-es2015' from '/Users/kangxiaoxiao/Documents/workspace/demo'

 

解決辦法如下：

1、安裝插件 @babel/preset-env

npm i @babel/preset-env -D

2、將 .babelrc中的 es2015 改為 @babel/preset-env

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

　　

二、多組件引入樣式

babel-plugin-component上的文檔說明如下：

{
  "plugins": [xxx,
    ["component", {
      libraryName: "antd",
      style: true,
    }, "antd"],
    ["component", {
      libraryName: "test-module",
      style: true,
    }, "test-module"]
  ]
}

但是。。實在是寫得太簡單了，怎么引入都報錯，經摸索，可以如下：

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      },
      "element-ui"
    ],
    [
      "component",
      {
        "libraryName": "mint-ui",
        "styleLibraryName": "theme-chalk",
        "style": true
      },
      "mint-ui"
    ]
  ]
}