螞蟻金服組件 ReferenceError: primordials is not defined

ReferenceError: primordials is not defined

錯誤經過

使用螞蟻金服的某個第三方組件時，本地需要測試編譯，執行 npm start 出現這個錯誤 ReferenceError: primordials is not defined。翻譯後：類型錯誤：primordials 這個沒有定義。

這個組件是螞蟻金服的，我看了 package.json 中的 start，螞蟻金服前端很厲害，直接封裝了自己的 rc-tools 工程化工具。 我這個項目目前使用 rc-tools 如果直接查看並更改 rc-tools 不現實。

"start": "rc-tools run server",

解決過程

網上搜索，發現是 node 版本和 gulp 版本不兼容的問題。我看了一下 rc-tools 的源代碼，這個庫沒有使用 webpack打包，使用了 gulp 工程工具。我本地 node 的版本是 v12.16.2，所以不兼容。

stackoverflow給出的方法是回退node版本或升級gulp版本。可以使用 nvm 管理本地的 node 版本。我的開發環境是 Mac，由於未知原因，使用 wget or curl 始終無法下載安裝 nvm 工具（顯示 443 請求出現問題）。

最後使用 n 這個管理工具，下載了早期的node版本（8） v8.16.0 現在執行 npm start 就可以打開開發環境服務器了

下面是 stackoverflow 的原文

How to fix ReferenceError: primordials is not defined in node

I have installed node modules by npm install, then I tried to do gulp sass-watch in command prompt. After that I got the below response.

[18:18:32] Requiring external module babel-register
fs.js:27
const { Math, Object, Reflect } = primordials;
ReferenceError: primordials is not defined

Have tried this before gulp sass-watch

npm -g install gulp-cli

I hit the same error. I suspect you’re using node 12 and gulp 3. That combination does not work: https://github.com/gulpjs/gulp/issues/2324

A previous workaround from Jan. does not work either: https://github.com/gulpjs/gulp/issues/2246

Solution: Either upgrade to gulp 4 or downgrade to an earlier node.

參考資料

https://stackoverflow.com/questions/55921442/how-to-fix-referenceerror-primordials-is-not-defined-in-node
https://stackoverflow.com/q/55921442/6304805
https://blog.csdn.net/zxxzxx23/article/details/103000393
https://www.jianshu.com/p/020c734e282b
https://www.jianshu.com/p/c641dcc47b48

結束語

最近接觸了不少阿里巴巴的組件，也看過一點點原代碼。潛意識裏阿里巴巴螞蟻金服這樣的大公司的代碼是完美無缺的，看過代碼後，發現也有很多地方可以提高。

阿里巴巴前端代碼的值得學習之處：

• 擁有自己獨立的工具庫、組件庫、圖標庫（rc-tools/ant-design/ant-design-mobile）這樣整個產品就有自己獨立的 UI 規範，後期維護性比較強，整體產品風格統一。
• 代碼工程化自動化完善：從代碼格式檢查（eslint）到單元測試、集成測試，這部分功能是小項目中缺乏的。大型項目中使用工程化工具可以方便的測試部署

"scripts": {
    "build": "rc-tools run build",
    "gh-pages": "rc-tools run gh-pages",
    "start": "rc-tools run server",
    "compile": "rc-tools run compile --babel-runtime",
    "pub": "rc-tools run pub --babel-runtime",
    "lint": "rc-tools run lint",
    "test": "jest",
    "types": "tslint *.ts{,x} && tsc",
    "coverage": "jest --coverage"
  },

• 很多新技術新方向使用：阿里的很多組件庫中已經穿插使用 ts 等，這也是未來的發展趨勢，已經對應的TS的規範和工程化

export interface Props {
  prefixCls?: string;
  className?: string;
  style?: React.CSSProperties;
  defaultValue?: Moment;
  value?: Moment;
  selectedValue?: Moment;
  mode?: Mode;
  locale?: object;
  renderFooter?: () => React.ReactNode;
  renderSidebar?: () => React.ReactNode;
  inputMode?:String
}