物料脚手架用 pnpm 安装问题

[alvin0216]

node 版本 16.13.0 使用 pnpm 安装

npm init @alilc/element example-materials
pnpm i

发现有一堆依赖问题，因为公司项目用了 pnpm workspace ，在安装的时候发现存在一堆依赖问题。

接着补齐依赖

pnpm i @alilc/lowcode-utils

接着补齐

{
  "name": "example-materials",
  "version": "0.1.0",
  "description": "example-materials",
  "main": "lib/index.js",
  "module": "es/index.js",
  "typings": "types/index.d.ts",
  "files": [
    "build",
    "dist",
    "lib",
    "es",
    "types"
  ],
  "scripts": {
    "start": "build-scripts start",
    "build": "build-scripts build",
    "lowcode:dev": "build-scripts start --config ./build.lowcode.js",
    "lowcode:build": "build-scripts build --config ./build.lowcode.js",
    "f2elint-scan": "f2elint scan",
    "f2elint-fix": "f2elint fix",
    "prepublishOnly": "npm run build && npm run lowcode:build"
  },
  "directories": {
    "test": "test"
  },
  "keywords": [
    "Fusion"
  ],
  "author": "fusion-team",
  "license": "MIT",
  "husky": {
    "hooks": {
      "pre-commit": "f2elint commit-file-scan",
      "commit-msg": "f2elint commit-msg-scan"
    }
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx,vue}": "f2elint exec eslint",
    "**/*.{css,scss,less,acss}": "f2elint exec stylelint"
  },
  "peerDependencies": {
    "moment": "latest",
    "react": "^16.x",
    "react-dom": "^16.x"
  },
  "devDependencies": {
    "@alib/build-scripts": "^0.1.3",
    "@alifd/build-plugin-lowcode": "^0.3.0",
    "@alifd/theme-2": "^0.4.0",
    "@storybook/addon-actions": "^6.3.1",
    "@storybook/addon-docs": "^6.3.4",
    "@storybook/addon-essentials": "^6.3.0",
    "@storybook/addon-storysource": "^6.3.1",
    "@storybook/react": "^6.3.5",
    "@storybook/source-loader": "^6.3.1",
    "@types/react": "^16.14.24",
    "@types/react-dom": "^16.9.4",
    "build-plugin-component": "^1.10.0",
    "build-plugin-fusion": "^0.1.0",
    "f2elint": "^1.2.0",
    "less-loader": "5.0.0",
    "sass": "1.3.0",
    "style-loader": "^3.3.1"
  },
  "dependencies": {
    "@alilc/lowcode-react-renderer": "^1.0.10",
    "@alilc/lowcode-utils": "^1.0.10",
    "lodash": "^4.17.21",
    "prop-types": "^15.5.8",
    "react": "^16.x",
    "react-dom": "^16.x"
  },
  "acceptDependencies": {
    "webpack": "^4.46.x"
  },
  "resolutions": {
    "webpack": "^4.46.x"
  },
  "componentConfig": {
    "isComponentLibrary": true
  }
}

还是有问题 快无语了。有人解决过吗

[alvin0216]

搞了一早上，已降级处理 害

[eternalsky]

npm init @alilc/element example-materials 后创建的是什么元素？

[alvin0216]

npm init @alilc/element example-materials 后创建的是什么元素？

就是默认创建的。

node-sass 兼容性

NodeJS	Supported node-sass version	Node Module
Node 17	7.0+	102
Node 16	6.0+	93
Node 15	5.0+, <7.0	88
Node 14	4.14+	83
Node 13	4.13+, <5.0	79
Node 12	4.12+, <8.0	72
Node 11	4.10+, <5.0	67
Node 10	4.9+, <6.0	64
Node 8	4.5.3+, <5.0	57
Node <8	<5.0	<57

pnpm 兼容性

降级了 node 版本和 pnpm 版本，然后就是填坑，补依赖了。

[alvin0216]

好像是内置依赖 node-sass 版本 4.x。就算你安装了 node-sass 6.x 版本，内部的包在用的也是 4.x。

node 16+，node-sass 4.x 版本跑编译。就会报错

[eternalsky]

默认创建的组件还是插件还是setter?

[eternalsky]

node sass 依赖应该已经从整个工具链里都已经移除过了，之前也测试过在 node 16 下运行的情况。

[alvin0216]

默认创建的组件还是插件还是setter?

物料 组件库

[github-actions[bot]]

This issue is stale because it has been open 10 days with no activity. Remove stale label or comment or this will be closed in 2 days.

[GreatAuk]

@alilc/element

@alilc/element 脚手架生成的项目还是会安装 node-sass 的。

[eternalsky]

我又重新初始化试了一下，目前强依赖 node-sass 的只有组件库里的 build-scripts 插件，build-plugin-component-multiple@1.0.0-beta.53。其他使用 npm 的情况下不会安装 node-sass。上面的图片里出现的情况，应该是 pnpm 强制安装了 sass-loader 的 peerDependencies 导致的，与现代 npm 的表现不符，这点请看下 pnpm 本身是否需要升级，或安装时增加参数。build-plugin-component-multiple 的问题，已反馈给 @mark-ck ，待后续升级。

[SamWeichangyue]

现在有进展吗， react-多组件库， pnpm i 还是会报错 Version: node V16 pnpm V7

[eternalsky]

@mark-ck 大佬看看，这块有更新吗

[SamWeichangyue]

已经倒在依赖安装上一周了，物料计划都delay了

[alvin0216]

兄弟们 ，node 降级处理，早搞早解决

[eternalsky]

是的，这个问题的关键不是 pnpm，而是 node 版本的问题，完全可以先降级到 14，就可以解决了。

[SamWeichangyue]

兄弟们 ，node 降级处理，早搞早解决

话虽如此，但是毕竟可以用nvm来做事情，但是其他项目也需要16，切来切去本身就很麻烦，如果我其他库还需要其他node版本，管理起来岂不是很麻烦

[eternalsky]

这里面上面也分析过了，一个是 pnpm 的默认安装行为问题，和新的 npm 表现不一致，强制安装了一个依赖的 peerDependencies，首先应该是解决这个问题，看看有没有参数让他和 npm 表现一致。其次才是解决 node 16 下不能安装 node-sass 的问题 @SamWeichangyue

[SamWeichangyue]

目前pnpm 加了 shamefully-hoist=true 基本上和npm行为一致 然后我切成npm i 依旧和上述报错一致

[SamWeichangyue]

降级到14.20.0依旧报错 @alvin0216 你降级到那个版本