Element-UI按需導入的坑

照著官方文檔

1.下載babel-plugin-component依賴項
npm install babel-plugin-component -D
2.添加/修改.babelrc文件
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

然后就報錯 Error: Cannot find module 'babel-preset-es2015
既然缺少這個依賴,那么

npm i babel-preset-es2015 -S

又報錯了 Error: plugin/preset files are not allowed to export objects

瘋狂百度,找到了解決方案:

1.安裝@babel/preset-env;項目目錄下,運行命令行

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

2.修改.babelrc文件,把es2015改成@babel/preset-env


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

3.也可以在babel.config.js中的修改

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

參考自
作者:I-T梟
鏈接:vue 給UI庫添加按需加載時啟動項目時 babel-preset-es2015 報錯

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容