Taro init 初始的專案編譯失敗Vue3 + NutUI 解決方案

bigbug發表於2021-10-11
編譯VueUI

昨晚才知道 Taro 框架,它能達到和 uni-app 一樣的“一套”跑所有平臺小程式,這麼方便,理所當然要試試.

按照它的官方文件快速開始, 過程中還發現了一個好用的npm包,那就是 mirror-config-china, 有了它,就不用手動設定映象了,安裝如下:

npm  install -g mirror-config-china

經過一系列的操作, Taro 已經安裝好了,通過它的 init 初始專案,選擇了 Vue3 + NutUI,然而它的初始程式碼專案居然編譯不過,它會報:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/gavin/Public/oneApp/src/pages/index/index.vue: Unexpected token, expected "," (17:29)

  15 |     });
  16 |
> 17 |     const handleClick = (type: string, msg: string, cover: boolean = false) => {
     |                              ^
  18 |       state.show = true;
  19 |       state.msg2 = msg;
  20 |       state.type = type;

熟悉 TS 語法的人知道這是語法沒有得到正確的解析報錯了,需要把abel.config.js 裡的 ts:false,改成 true,因為 NutUI 是 TS語法…不開啟編譯不過.
就算你在 使用 Taro 初始專案的時候,沒有選擇使用 TS,這裡也要改成 true:

  presets: [
    ['taro', {
      framework: 'vue3',
      ts: true
    }],
  ],

本以為這樣就可以,但沒想到又報:


監聽檔案修改中...

⚠️  Compiled with warnings.

./src/app.js 9:8-14
" '@nutui/nutui-taro' does not contain an export named 'Button'.

./src/app.js 9:20-25
" '@nutui/nutui-taro' does not contain an export named 'Toast'.

突然不想使用這個框架了,demo都這麼多問題…
那要用 uni-app 嗎?
想了下,於是繼續研究是什麼問題.
這是時候,我忍不住加了文件貼出來的微信群,希望有來之被坑之人的幫助.
於是我加群了、提問了、截圖了、刪了 node_models 又安裝,連續使用 Taro init 初始專案 oneAPP、twoAPP…嘗試找問題
Taro init 初始的專案編譯失敗Vue3 + NutUI 解決方案

Taro init 初始的專案編譯失敗Vue3 + NutUI 解決方案

Taro init 初始的專案編譯失敗Vue3 + NutUI 解決方案

bigbugMBP Public % ls -l
total 0
drwxr-xr-x  14 gavin  staff  448 Oct 11 23:48 oneApp
drwxr-xr-x  15 gavin  staff  480 Oct 11 01:05 threeApp
drwxr-xr-x  16 gavin  staff  512 Oct 11 00:56 twoApp
...

群友們沒遇到這個問題或是其它,沒人能給出正確答案,我也被這個問題困擾著去寫 PHP程式碼了.
下班回家,群裡還是沒有回覆我,今天就屬我是群裡最活躍的人.
大腦系統經過一天的執行,想出來一些思路:要不看看 NutUI 文件.
快速瀏覽指引文件,證實:

Taro 的 Cli 初始的專案(Vue3 + Nutui ) 程式碼本身就不完整 (現在是2021-10-11).

修復方案是:
使用 taro 選 Vue3 + NutUI,還需要自己下載:

yarm add babel-plugin-import --dev

然後在babel.config.js 加上:

 plugins: [
    [
      "import",
      {
        "libraryName": "@nutui/nutui-taro",
        "libraryDirectory": "dist/packages/_es",
        "camel2DashComponentName": false
      },
      'nutui3-taro'
    ]
  ]

完整的 babel.config.js :

// babel-preset-taro 更多選項和預設值：
// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
module.exports = {
  presets: [
    ['taro', {
      framework: 'vue3',
      ts: true
    }],
  ],
  plugins: [
    [
      "import",
      {
        "libraryName": "@nutui/nutui-taro",
        "libraryDirectory": "dist/packages/_es",
        "camel2DashComponentName": false
      },
      'nutui3-taro'
    ]
  ]
}

總結

這是我用的最糟心的一次開源軟體, CLI 生成的初始專案程式碼, 一堆bug, 連一個基本的demo都跑不了、編譯不過…只能說自己不要做這樣的事咯~ 好了,晚安.

本作品採用《CC 協議》，轉載必須註明作者和本文連結
Less is more.

相關文章