想要定制 antd 重新发包，antd-tools run dist 编译报错

Question

想要定制 antd 重新发包，antd-tools run dist 编译报错

yunsii opened this issue 3 years ago · comments

计划是通过 ant-design/ant-design@0a0fa61 去定制，先是简单的改了主题色和包名，编译就报错了：

antd-tools run dist /path/to/project/node_modules/async-done/index.js:18 throw err; ^

Error [ERR_UNHANDLED_ERROR]: Unhandled error. ({
uid: 0,
name: '',
branch: false,
error: WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

configuration[2].entry should be an non-empty object.
-> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
configuration[3].entry should be an non-empty object.
-> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
configuration[4].entry should be an non-empty object.
-> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
configuration[5].entry should be an non-empty object.
-> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
at webpack (/path/to/project/node_modules/webpack/lib/webpack.js:31:9)
at dist (/path/to/project/node_modules/@ant-design/tools/lib/gulpfile.js:47:3)
at /path/to/project/node_modules/@ant-design/tools/lib/gulpfile.js:134:5
at bound (domain.js:427:14)
at runBound (domain.js:440:12)
at asyncRunner (/path/to/project/node_modules/async-done/index.js:55:18)
at processTicksAndRejections (internal/process/task_queues.js:79:11),
duration: [ 0, 595114791 ],
time: 1622170660506
})
at Gulp.emit (events.js:303:17)
at Gulp.EventEmitter.emit (domain.js:483:12)
at Object.error (/path/to/project/node_modules/undertaker/lib/helpers/createExtensions.js:61:10)
at handler (/path/to/project/node_modules/now-and-later/lib/mapSeries.js:47:14)
at f (/path/to/project/node_modules/once/once.js:25:25)
at f (/path/to/project/node_modules/once/once.js:25:25)
at tryCatch (/path/to/project/node_modules/async-done/index.js:24:15)
at done (/path/to/project/node_modules/async-done/index.js:40:12)
at Domain.onError (/path/to/project/node_modules/async-done/index.js:51:5)
at Object.onceWrapper (events.js:421:26)
at Domain.emit (events.js:314:20)
at Domain.EventEmitter.emit (domain.js:483:12)
at Domain._errorHandler (domain.js:247:23)
at Object. (domain.js:157:29)
at process._fatalException (internal/process/execution.js:164:29) {
code: 'ERR_UNHANDLED_ERROR',
context: {
uid: 0,
name: '',
branch: false,
error: WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration[2].entry should be an non-empty object.
  -> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
- configuration[3].entry should be an non-empty object.
  -> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
- configuration[4].entry should be an non-empty object.
  -> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
- configuration[5].entry should be an non-empty object.
  -> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
  at webpack (/path/to/project/node_modules/webpack/lib/webpack.js:31:9)
  at dist (/path/to/project/node_modules/@ant-design/tools/lib/gulpfile.js:47:3)
  at /path/to/project/node_modules/@ant-design/tools/lib/gulpfile.js:134:5
  at bound (domain.js:427:14)
  at runBound (domain.js:440:12)
  at asyncRunner (/path/to/project/node_modules/async-done/index.js:55:18)
  at processTicksAndRejections (internal/process/task_queues.js:79:11) {
  details: undefined,
  missing: undefined,
  origin: undefined,
  dependencies: undefined,
  module: undefined,
  validationErrors: [
  {
  keyword: 'anyOf',
  dataPath: '[2].entry',
  schemaPath: '#/properties/entry/anyOf',
  params: {},
  message: 'should match some schema in anyOf',
  schema: [ [Object] ],
  parentSchema: {
  description: 'The entry point(s) of the compilation.',
  anyOf: [Array]
  },
  data: {},
  children: [
  [Object], [Object],
  [Object], [Object],
  [Object], [Object],
  [Object], [Object]
  ]
  },
  {
  keyword: 'anyOf',
  dataPath: '[3].entry',
  schemaPath: '#/properties/entry/anyOf',
  params: {},
  message: 'should match some schema in anyOf',
  schema: [ [Object] ],
  parentSchema: {
  description: 'The entry point(s) of the compilation.',
  anyOf: [Array]
  },
  data: {},
  children: [
  [Object], [Object],
  [Object], [Object],
  [Object], [Object],
  [Object], [Object]
  ]
  },
  {
  keyword: 'anyOf',
  dataPath: '[4].entry',
  schemaPath: '#/properties/entry/anyOf',
  params: {},
  message: 'should match some schema in anyOf',
  schema: [ [Object] ],
  parentSchema: {
  description: 'The entry point(s) of the compilation.',
  anyOf: [Array]
  },
  data: {},
  children: [
  [Object], [Object],
  [Object], [Object],
  [Object], [Object],
  [Object], [Object]
  ]
  },
  {
  keyword: 'anyOf',
  dataPath: '[5].entry',
  schemaPath: '#/properties/entry/anyOf',
  params: {},
  message: 'should match some schema in anyOf',
  schema: [ [Object] ],
  parentSchema: {
  description: 'The entry point(s) of the compilation.',
  anyOf: [Array]
  },
  data: {},
  children: [
  [Object], [Object],
  [Object], [Object],
  [Object], [Object],
  [Object], [Object]
  ]
  }
  ],
  domainThrown: true
  },
  duration: [ 0, 595114791 ],
  time: 1622170660506
  }
  }
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! coded@0.0.1 dist: antd-tools run dist
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the coded@0.0.1 dist script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/theprimone/.npm/_logs/2021-05-28T02_57_40_532Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! coded@0.0.1 build: npm run compile && NODE_OPTIONS='--max-old-space-size=4096' npm run dist
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the coded@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/theprimone/.npm/_logs/2021-05-28T02_57_40_568Z-debug.log

找了相关 issue 后通过 ant-design/ant-design#13636 (comment) 得到一点启发。

在 antd-tools 中搜索了一下，不知道是不是这里导致的？如果可以的话希望能告知一下如果让 antd-tool 有更好的兼容性，我可以 PR 一下，谢谢。

Yuns · Answer 1 · Fri May 28 2021 22:07:39 GMT+0800 (China Standard Time)

重新打包发布了 antd-tools，把 antd 关键词全部替换成自定义的包名，好像可用了。

另外，需要重新打包的 antd 中安装依赖时使用 yarn 好像有些问题，删除 node_modules 使用 npm i 之后就没问题了。

liqupan · Answer 2 · Mon May 31 2021 14:16:20 GMT+0800 (China Standard Time)

重新打包发布了 antd-tools，把 antd 关键词全部替换成自定义的包名，好像可用了。

另外，需要重新打包的 antd 中安装依赖时使用 yarn 好像有些问题，删除 node_modules 使用 npm i 之后就没问题了。

请问在antd-tools中替换了哪些antd关键字，修改了ant-desgin中了哪些文件？

Yuns · Answer 3 · Mon May 31 2021 14:31:30 GMT+0800 (China Standard Time)

展开举例说明一下，以下假设是将 antd 打包成 beed。

antd-tools => beed-tools

全局搜索 antd 替换成 beed，存在一些关联的根据 antd 字段拼成的变量也一起改一下；
然后把 antd-tools package.json 中的 name 改成 beed-tools，bin 中对应的脚本定义以及关联的文件重命名一下
npm run pub 发布 beed-tools

antd => beed

antd 所在项目中的 package.json 中的 name 改为 beed，相关的 antd-tools 命令替换 beed-tools
全局搜索 antd 改成 beed
eslintrc.js 中添加如下字段 overrides.parserOptions.project: './tsconfig.json' 保证项目内 eslint 正常解析 beed
清空 CHANGLOG.*.md 写上自己的版本发布信息，日期必填
npm run pub 发布 beed

以上应该差不多完成改造了，可能会有一些报错信息，根据提示修改就行了，当前我暂时禁用了 test-all.sh 中 test 相关脚本。至于如果使用私有镜像仓库，beed-tools 新增 .npmrc 配置 registry=https://your/npm/registry/ 即可。另外由于 beed 使用了 beed-tools 发布，需要修改 package.json 中的 publishConfig.registry 解决。

Yuns · Answer 4 · Mon May 31 2021 14:33:20 GMT+0800 (China Standard Time)

另外，注意还有一些名称中存在 antd 的包那就不要改了，除非你还想重新发布一个。

Yuns · Answer 5 · Mon May 31 2021 15:36:19 GMT+0800 (China Standard Time)

这两个包也得定制一下。。。

liqupan · Answer 6 · Mon May 31 2021 16:52:36 GMT+0800 (China Standard Time)

@theprimone
如果我想不修改直接publish到私有服务器上，不修改包名，没有修改任何地方

npm run pub

还是会出现这些错误
C:\workspace\ant-design\node_modules\async-done\index.js:18
throw err;
^

Error [ERR_UNHANDLED_ERROR]: Unhandled error. ({
uid: 11,
name: '',
branch: false,
error: 1,
duration: [ 1, 936748000 ],
time: 1622450060616
})
at Gulp.emit (events.js:304:17)
at Gulp.EventEmitter.emit (domain.js:467:12)
at Object.error (C:\workspace\ant-design\node_modules\undertaker\lib\helpers\createExtensions.js:61:10)
at handler (C:\workspace\ant-design\node_modules\now-and-later\lib\mapSeries.js:47:14)
at f (C:\workspace\ant-design\node_modules\once\once.js:25:25)
at f (C:\workspace\ant-design\node_modules\once\once.js:25:25)
at tryCatch (C:\workspace\ant-design\node_modules\async-done\index.js:24:15)
at done (C:\workspace\ant-design\node_modules\async-done\index.js:40:12)
at C:\workspace\ant-design\node_modules@ant-design\tools\lib\gulpfile.js:378:9
at ChildProcess. (C:\workspace\ant-design\node_modules@ant-design\tools\lib\runCmd.js:23:7)
at ChildProcess.emit (events.js:315:20)
at ChildProcess.EventEmitter.emit (domain.js:529:15)
at maybeClose (internal/child_process.js:1048:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
at Process.callbackTrampoline (internal/async_hooks.js:131:14) {
code: 'ERR_UNHANDLED_ERROR',
context: {
uid: 11,
name: '',
branch: false,
error: 1,
duration: [ 1, 936748000 ],
time: 1622450060616
}
}

Yuns · Answer 7 · Mon May 31 2021 17:29:26 GMT+0800 (China Standard Time)

@liqupan 你是怎么安装项目依赖的？

liqupan · Answer 8 · Tue Jun 01 2021 10:02:15 GMT+0800 (China Standard Time)

@theprimone
通过yarn，如果npm会出现错误
λ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: antd@4.16.1
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! dev react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from @ant-design/hitu@0.0.0-alpha.16
npm ERR! node_modules/@ant-design/hitu
npm ERR! dev @ant-design/hitu@"^0.0.0-alpha.13" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\54460\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\54460\AppData\Local\npm-cache_logs\2021-06-01T01_49_39_079Z-debug.log

Yuns · Answer 9 · Tue Jun 01 2021 12:00:13 GMT+0800 (China Standard Time)

那就很奇怪了，我刚才使用通过 yarn 安装的，没什么问题的 😂

Yuns · Answer 10 · Tue Jun 01 2021 17:16:27 GMT+0800 (China Standard Time)

再补充：

antd-theme-generator => beed-theme-generator
beed 中 components 中的组件样式需要调整，主要是将 ant => bee

liqupan · Answer 11 · Tue Jun 01 2021 17:28:48 GMT+0800 (China Standard Time)

最终解决方案是：没有修改antd名称，最终publish到了私服里面。

Yuns · Answer 12 · Tue Jun 01 2021 17:41:11 GMT+0800 (China Standard Time)

最终解决方案是：没有修改antd名称，最终publish到了私服里面。

还是啥都不用干呗，不过你这个需求有点离谱啊 😂

ihavecoke · Answer 13 · Fri Nov 12 2021 23:46:08 GMT+0800 (China Standard Time)

@theprimone 在 antd 源代码中找到 webpack.config.js 文件修改processWebpackThemeConfig以下代码即可正常编译

Yuns · Answer 14 · Sat Nov 13 2021 00:12:32 GMT+0800 (China Standard Time)

@theprimone 在 antd 源代码中找到 webpack.config.js 文件修改processWebpackThemeConfig以下代码即可正常编译

这看起来只是处理主题 less 文件而已啊

zechau · Answer 15 · Tue Dec 21 2021 13:12:58 GMT+0800 (China Standard Time)

@theprimone 在 antd 源代码中找到 webpack.config.js 文件修改processWebpackThemeConfig以下代码即可正常编译

It works for me =_=v