蚂蚁金服组件 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
}