neo-cmp-cli 1.2.21 → 1.2.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -19
- package/package.json +1 -1
- package/src/template/antd-custom-cmp-template/neo.config.js +2 -2
- package/src/template/antd-custom-cmp-template/package.json +1 -1
- package/src/template/develop/neo-custom-cmp-template/package.json +1 -1
- package/src/template/echarts-custom-cmp-template/neo.config.js +2 -2
- package/src/template/echarts-custom-cmp-template/package.json +1 -1
- package/src/template/neo-custom-cmp-template/package.json +1 -1
- package/src/template/react-custom-cmp-template/package.json +1 -1
- package/src/template/react-ts-custom-cmp-template/package.json +1 -1
- package/src/template/vue2-custom-cmp-template/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
## Neo 自定义组件开发工具
|
|
2
|
-
neo-cmp-cli 是 Neo 自定义组件开发工具，基于 [AKFun](https://github.com/wibetter/akfun)
|
|
2
|
+
neo-cmp-cli 是 Neo 自定义组件开发工具，基于 [AKFun](https://github.com/wibetter/akfun) 的工程能力，提供 初始化、编译构建、预览调试、热更新、多技术栈支持和一键发布等功能。
|
|
3
3
|
|
|
4
4
|
### 主要特性
|
|
5
5
|
- **零配置**: 内置默认配置，开箱可用；
|
|
@@ -8,7 +8,7 @@ neo-cmp-cli 是 Neo 自定义组件开发工具，基于 [AKFun](https://github.
|
|
|
8
8
|
- **灵活可配**: 支持 构建入口、别名、代理、SASS 注入、ESLint/StyleLint、Babel/Loader/Plugin 扩展等配置；
|
|
9
9
|
- **样式与规范**: 内置 Autoprefixer、Sass、PostCSS、ESLint、StyleLint；
|
|
10
10
|
- **参数替换**: 支持基于 [params-replace-loader](https://www.npmjs.com/package/params-replace-loader) 的环境变量批量替换；
|
|
11
|
-
- **一键发布**: 内置发布到 OSS
|
|
11
|
+
- **一键发布**: 内置发布到 OSS 的能力，并支持自定义对象存储配置。
|
|
12
12
|
|
|
13
13
|
### 模板类型（neo init 可选）
|
|
14
14
|
- **React 模板**: [react-custom-cmp-template](https://github.com/wibetter/react-custom-cmp-template)
|
|
@@ -74,14 +74,13 @@ npm run publish2oss
|
|
|
74
74
|
- **neo init**: 交互式创建自定义组件（支持 -t、--name）。
|
|
75
75
|
- **neo preview**: 本地预览自定义组件内容，默认支持热更新与接口代理。
|
|
76
76
|
- **neo linkDebug**: 外链调试模式，在平台端页面设计器中调试自定义组件。
|
|
77
|
-
- **neo build2lib**: 产出 UMD/ESM 库文件（可配置）。
|
|
78
77
|
- **neo publish2oss**: 构建并上传到对象存储（可自定义配置对象存储）。
|
|
79
78
|
|
|
80
|
-
##
|
|
81
|
-
- **自动生成入口配置**: 当 `entry`
|
|
82
|
-
-
|
|
79
|
+
## 自动识别自定义组件
|
|
80
|
+
- **自动生成入口配置**: 当 `entry` 未配置时，自动从 `src/components` 目录下扫描并识别自定义组件，`src/components` 下的子目录名称作为自定义组件的 cmpType，并以其目录下的 `index.ts/.tsx/.js/.jsx` 文件作为组件内容文件，model.[tj]s 作为模型内容文件；
|
|
81
|
+
- **自动注册自定义组件**: 当 `entry` 未配置时，自动生成自定义组件注册文件和模型注册文件，并注入到构建脚本中，无需用户手动编写注册文件 [neo-register](https://www.npmjs.com/package/neo-register)。
|
|
83
82
|
|
|
84
|
-
##
|
|
83
|
+
## 支持本地构建并发布到对象存储（OSS）
|
|
85
84
|
执行 `neo publish2oss` 即可构建并上传到对象存储。发布前请确保：
|
|
86
85
|
- **package.json 的 name 唯一**
|
|
87
86
|
- **version 不重复**
|
|
@@ -95,7 +94,7 @@ neo-cmp-cli 默认提供完整配置；如需自定义，使用 `neo config init
|
|
|
95
94
|
以下为常用配置示例（片段可自由组合）。
|
|
96
95
|
|
|
97
96
|
### 1) 基础规范与检查
|
|
98
|
-
```
|
|
97
|
+
```javascript
|
|
99
98
|
module.exports = {
|
|
100
99
|
settings: {
|
|
101
100
|
enableESLint: true, // 是否开启ESLint，默认开启ESLint检测代码格式
|
|
@@ -107,7 +106,7 @@ module.exports = {
|
|
|
107
106
|
```
|
|
108
107
|
|
|
109
108
|
### 2) 构建入口（优先级：linkDebug/build2lib/publish2oss.entry > webpack.entry）
|
|
110
|
-
```
|
|
109
|
+
```javascript
|
|
111
110
|
module.exports = {
|
|
112
111
|
webpack: {
|
|
113
112
|
entry: { index: './src/index.js' },
|
|
@@ -117,11 +116,11 @@ module.exports = {
|
|
|
117
116
|
publish2oss: { entry: {} },
|
|
118
117
|
}
|
|
119
118
|
```
|
|
120
|
-
备注1: 当未配置 entry 时，cli
|
|
119
|
+
备注1: 当未配置 entry 时，cli 会识别当前项目 src/components 目录下已有的自定义组件，并自动生成对应的 entry 构建入口配置；
|
|
121
120
|
备注2: 详细配置方法请查看 Webpack 官网 ([关于entry的配置方法](https://www.webpackjs.com/configuration/entry-context/#entry))。
|
|
122
121
|
|
|
123
122
|
### 3) 解析配置（extensions/alias）
|
|
124
|
-
```
|
|
123
|
+
```javascript
|
|
125
124
|
module.exports = {
|
|
126
125
|
webpack: {
|
|
127
126
|
resolve: {
|
|
@@ -135,7 +134,7 @@ module.exports = {
|
|
|
135
134
|
备注2: alias 的详细配置方法请查看 Webpack 官网 ([关于resolve-alias的配置方法](https://www.webpackjs.com/configuration/resolve/#resolve-alias))。
|
|
136
135
|
|
|
137
136
|
### 4) 页面模板与样式资源
|
|
138
|
-
```
|
|
137
|
+
```javascript
|
|
139
138
|
module.exports = {
|
|
140
139
|
webpack: {
|
|
141
140
|
template: '', // 自定义页面模板路径
|
|
@@ -145,7 +144,7 @@ module.exports = {
|
|
|
145
144
|
```
|
|
146
145
|
|
|
147
146
|
### 5) 依赖打包策略（忽略 node_modules）
|
|
148
|
-
```
|
|
147
|
+
```javascript
|
|
149
148
|
module.exports = {
|
|
150
149
|
webpack: {
|
|
151
150
|
ignoreNodeModules: true, // 打包时是否忽略 node_modules，默认为false
|
|
@@ -155,7 +154,7 @@ module.exports = {
|
|
|
155
154
|
```
|
|
156
155
|
|
|
157
156
|
### 6) TypeScript 声明文件与工程目录
|
|
158
|
-
```
|
|
157
|
+
```javascript
|
|
159
158
|
module.exports = {
|
|
160
159
|
webpack: {
|
|
161
160
|
createDeclaration: false, // 可选择是否生成ts声明文件，默认为false
|
|
@@ -165,7 +164,7 @@ module.exports = {
|
|
|
165
164
|
```
|
|
166
165
|
|
|
167
166
|
### 7) 环境变量替换（params-replace-loader）
|
|
168
|
-
```
|
|
167
|
+
```javascript
|
|
169
168
|
module.exports = {
|
|
170
169
|
envParams: {
|
|
171
170
|
common: { '#version#': '20250822.1' },
|
|
@@ -179,7 +178,7 @@ module.exports = {
|
|
|
179
178
|
```
|
|
180
179
|
|
|
181
180
|
### 8) 本地开发代理与 HTTPS
|
|
182
|
-
```
|
|
181
|
+
```javascript
|
|
183
182
|
module.exports = {
|
|
184
183
|
preview: {
|
|
185
184
|
proxyTable: {},
|
|
@@ -191,7 +190,7 @@ module.exports = {
|
|
|
191
190
|
备注2: 启用 HTTPS 后，若浏览器提示不安全，可在 Chrome 地址栏打开 `chrome://flags/#allow-insecure-localhost` 并设置为 Enabled。
|
|
192
191
|
|
|
193
192
|
### 9) 库构建（UMD/ESM）
|
|
194
|
-
```
|
|
193
|
+
```javascript
|
|
195
194
|
module.exports = {
|
|
196
195
|
build2lib: {
|
|
197
196
|
NODE_ENV: 'production',
|
|
@@ -210,7 +209,7 @@ module.exports = {
|
|
|
210
209
|
```
|
|
211
210
|
|
|
212
211
|
### 10) 自定义 Loader / Plugin / Babel Plugins
|
|
213
|
-
```
|
|
212
|
+
```javascript
|
|
214
213
|
module.exports = {
|
|
215
214
|
webpack: {
|
|
216
215
|
moduleRules: [], // 用于添加自定义 loaders
|
|
@@ -227,7 +226,7 @@ module.exports = {
|
|
|
227
226
|
备注: 以上自定义 babelPlugins 用于实现 [element-ui 组件按需引入](https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru)。
|
|
228
227
|
|
|
229
228
|
也支持以函数形式动态调整内置 Babel Plugins：
|
|
230
|
-
```
|
|
229
|
+
```javascript
|
|
231
230
|
module.exports = {
|
|
232
231
|
webpack: {
|
|
233
232
|
babelPlugins: (curBabelPlugins) => {
|
|
@@ -238,5 +237,33 @@ module.exports = {
|
|
|
238
237
|
}
|
|
239
238
|
```
|
|
240
239
|
|
|
240
|
+
### 11) 自定义组件之间实现模块共享
|
|
241
|
+
|
|
242
|
+
步骤1：在自定义组件A（cmpType:neo-custom-cmpA）/ 配置文件中定义要共享出来的模块A（xxModule_A）
|
|
243
|
+
```javascript
|
|
244
|
+
module.exports = {
|
|
245
|
+
neoCommonModule: {
|
|
246
|
+
// neoExports: ['xxModule'], // 数组写法，可用于导出第三方依赖模块
|
|
247
|
+
neoExports: { 'xxModule_A': path.resolve('./src/components/xxModule_A') }, // 对象写法，如果导出内容模块，需要使用绝对路径导出
|
|
248
|
+
},
|
|
249
|
+
}
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
步骤2：在自定义组件B（cmpType:neo-custom-cmpB）/ 配置文件中 声明需要使用 自定义组件 A 分享出来的模块（xxModule_A）
|
|
253
|
+
```javascript
|
|
254
|
+
module.exports = {
|
|
255
|
+
neoCommonModule: {
|
|
256
|
+
remotes: ['neo-custom-cmpA'], // 远程自定义组件，表示当前自定义组件 B 会用到的自定义组件
|
|
257
|
+
neoExternals: ['xxModule_A'], // 自定义组件中需要剔除的模块（远程自定义组件中分享出来的模块），仅支持数组写法，需要和 remotes 配合使用
|
|
258
|
+
},
|
|
259
|
+
}
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
步骤3：在自定义组件B 源码中使用 自定义组件 A 分享出来的模块（xxModule_A）
|
|
263
|
+
```javascript
|
|
264
|
+
import ChartWidget from 'chart-widget'; // 导入自定义组件 A 共享出来的模块
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
|
|
241
268
|
---
|
|
242
269
|
如需更多细节与高级用法，请参考模板项目与源码注释。
|
package/package.json
CHANGED
|
@@ -41,10 +41,10 @@ module.exports = {
|
|
|
41
41
|
// 用于添加 Neo 共享依赖模块和剔除模块
|
|
42
42
|
/*
|
|
43
43
|
neoCommonModule: {
|
|
44
|
+
remotes: ['chart-widget'], // 远程自定义组件，表示当前自定义组件会用到的远程组件
|
|
45
|
+
neoExternals: ['chart-widget'], // 自定义组件中需要剔除的模块，仅支持数组写法，需要和 remotes 配合使用
|
|
44
46
|
// neoExports: ['xxModule'], // 自定义组件 共享出来的模块，支持数组和对象形式
|
|
45
47
|
// neoExports: { 'xxModule': path.resolve('./src/components/xxModule') }, // 对象写法
|
|
46
|
-
neoExternals: ['chart-widget'], // 自定义组件中需要剔除的模块，仅支持数组写法
|
|
47
|
-
remotes: ['chart-widget'], // 远程组件，表示当前自定义组件会用到的远程组件，需要和 neoExternals 配合使用
|
|
48
48
|
},
|
|
49
49
|
*/
|
|
50
50
|
preview: {
|
|
@@ -46,8 +46,8 @@ module.exports = {
|
|
|
46
46
|
'chart-widget': path.resolve('./src/components/chart-widget'), // 导出图表自定义组件
|
|
47
47
|
'neo-register': 'neo-register', // 导出 Neo 注册模块
|
|
48
48
|
},
|
|
49
|
-
//
|
|
50
|
-
//
|
|
49
|
+
// remotes: ['xxModule'], // 远程组件，表示当前自定义组件会用到的远程组件
|
|
50
|
+
// neoExternals: ['xxModule'], // 自定义组件中需要剔除的模块，仅支持数组写法，需要和 remotes 配合使用
|
|
51
51
|
},
|
|
52
52
|
//*/
|
|
53
53
|
preview: {
|