neo-cmp-cli 1.2.21 → 1.2.22
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 -18
- 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)
|
|
@@ -77,11 +77,11 @@ npm run publish2oss
|
|
|
77
77
|
- **neo build2lib**: 产出 UMD/ESM 库文件（可配置）。
|
|
78
78
|
- **neo publish2oss**: 构建并上传到对象存储（可自定义配置对象存储）。
|
|
79
79
|
|
|
80
|
-
##
|
|
81
|
-
- **自动生成入口配置**: 当 `entry`
|
|
82
|
-
-
|
|
80
|
+
## 自动识别自定义组件
|
|
81
|
+
- **自动生成入口配置**: 当 `entry` 未配置时，自动从 `src/components` 目录下扫描并识别自定义组件，`src/components` 下的子目录名称作为自定义组件的 cmpType，并以其目录下的 `index.ts/.tsx/.js/.jsx` 文件作为组件内容文件，model.[tj]s 作为模型内容文件；
|
|
82
|
+
- **自动注册自定义组件**: 自动生成自定义组件注册文件和模型注册文件，并注入到构建脚本中，无需用户手动编写注册文件 [neo-register](https://www.npmjs.com/package/neo-register)。
|
|
83
83
|
|
|
84
|
-
##
|
|
84
|
+
## 支持本地构建并发布到对象存储（OSS）
|
|
85
85
|
执行 `neo publish2oss` 即可构建并上传到对象存储。发布前请确保：
|
|
86
86
|
- **package.json 的 name 唯一**
|
|
87
87
|
- **version 不重复**
|
|
@@ -95,7 +95,7 @@ neo-cmp-cli 默认提供完整配置；如需自定义，使用 `neo config init
|
|
|
95
95
|
以下为常用配置示例（片段可自由组合）。
|
|
96
96
|
|
|
97
97
|
### 1) 基础规范与检查
|
|
98
|
-
```
|
|
98
|
+
```javascript
|
|
99
99
|
module.exports = {
|
|
100
100
|
settings: {
|
|
101
101
|
enableESLint: true, // 是否开启ESLint，默认开启ESLint检测代码格式
|
|
@@ -107,7 +107,7 @@ module.exports = {
|
|
|
107
107
|
```
|
|
108
108
|
|
|
109
109
|
### 2) 构建入口（优先级：linkDebug/build2lib/publish2oss.entry > webpack.entry）
|
|
110
|
-
```
|
|
110
|
+
```javascript
|
|
111
111
|
module.exports = {
|
|
112
112
|
webpack: {
|
|
113
113
|
entry: { index: './src/index.js' },
|
|
@@ -117,11 +117,11 @@ module.exports = {
|
|
|
117
117
|
publish2oss: { entry: {} },
|
|
118
118
|
}
|
|
119
119
|
```
|
|
120
|
-
备注1: 当未配置 entry 时，cli
|
|
120
|
+
备注1: 当未配置 entry 时，cli 会识别当前项目 src/components 目录下已有的自定义组件，并自动生成对应的 entry 构建入口配置；
|
|
121
121
|
备注2: 详细配置方法请查看 Webpack 官网 ([关于entry的配置方法](https://www.webpackjs.com/configuration/entry-context/#entry))。
|
|
122
122
|
|
|
123
123
|
### 3) 解析配置（extensions/alias）
|
|
124
|
-
```
|
|
124
|
+
```javascript
|
|
125
125
|
module.exports = {
|
|
126
126
|
webpack: {
|
|
127
127
|
resolve: {
|
|
@@ -135,7 +135,7 @@ module.exports = {
|
|
|
135
135
|
备注2: alias 的详细配置方法请查看 Webpack 官网 ([关于resolve-alias的配置方法](https://www.webpackjs.com/configuration/resolve/#resolve-alias))。
|
|
136
136
|
|
|
137
137
|
### 4) 页面模板与样式资源
|
|
138
|
-
```
|
|
138
|
+
```javascript
|
|
139
139
|
module.exports = {
|
|
140
140
|
webpack: {
|
|
141
141
|
template: '', // 自定义页面模板路径
|
|
@@ -145,7 +145,7 @@ module.exports = {
|
|
|
145
145
|
```
|
|
146
146
|
|
|
147
147
|
### 5) 依赖打包策略（忽略 node_modules）
|
|
148
|
-
```
|
|
148
|
+
```javascript
|
|
149
149
|
module.exports = {
|
|
150
150
|
webpack: {
|
|
151
151
|
ignoreNodeModules: true, // 打包时是否忽略 node_modules，默认为false
|
|
@@ -155,7 +155,7 @@ module.exports = {
|
|
|
155
155
|
```
|
|
156
156
|
|
|
157
157
|
### 6) TypeScript 声明文件与工程目录
|
|
158
|
-
```
|
|
158
|
+
```javascript
|
|
159
159
|
module.exports = {
|
|
160
160
|
webpack: {
|
|
161
161
|
createDeclaration: false, // 可选择是否生成ts声明文件，默认为false
|
|
@@ -165,7 +165,7 @@ module.exports = {
|
|
|
165
165
|
```
|
|
166
166
|
|
|
167
167
|
### 7) 环境变量替换（params-replace-loader）
|
|
168
|
-
```
|
|
168
|
+
```javascript
|
|
169
169
|
module.exports = {
|
|
170
170
|
envParams: {
|
|
171
171
|
common: { '#version#': '20250822.1' },
|
|
@@ -179,7 +179,7 @@ module.exports = {
|
|
|
179
179
|
```
|
|
180
180
|
|
|
181
181
|
### 8) 本地开发代理与 HTTPS
|
|
182
|
-
```
|
|
182
|
+
```javascript
|
|
183
183
|
module.exports = {
|
|
184
184
|
preview: {
|
|
185
185
|
proxyTable: {},
|
|
@@ -191,7 +191,7 @@ module.exports = {
|
|
|
191
191
|
备注2: 启用 HTTPS 后，若浏览器提示不安全，可在 Chrome 地址栏打开 `chrome://flags/#allow-insecure-localhost` 并设置为 Enabled。
|
|
192
192
|
|
|
193
193
|
### 9) 库构建（UMD/ESM）
|
|
194
|
-
```
|
|
194
|
+
```javascript
|
|
195
195
|
module.exports = {
|
|
196
196
|
build2lib: {
|
|
197
197
|
NODE_ENV: 'production',
|
|
@@ -210,7 +210,7 @@ module.exports = {
|
|
|
210
210
|
```
|
|
211
211
|
|
|
212
212
|
### 10) 自定义 Loader / Plugin / Babel Plugins
|
|
213
|
-
```
|
|
213
|
+
```javascript
|
|
214
214
|
module.exports = {
|
|
215
215
|
webpack: {
|
|
216
216
|
moduleRules: [], // 用于添加自定义 loaders
|
|
@@ -227,7 +227,7 @@ module.exports = {
|
|
|
227
227
|
备注: 以上自定义 babelPlugins 用于实现 [element-ui 组件按需引入](https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru)。
|
|
228
228
|
|
|
229
229
|
也支持以函数形式动态调整内置 Babel Plugins：
|
|
230
|
-
```
|
|
230
|
+
```javascript
|
|
231
231
|
module.exports = {
|
|
232
232
|
webpack: {
|
|
233
233
|
babelPlugins: (curBabelPlugins) => {
|
|
@@ -238,5 +238,33 @@ module.exports = {
|
|
|
238
238
|
}
|
|
239
239
|
```
|
|
240
240
|
|
|
241
|
+
### 11) 自定义组件之间实现模块共享
|
|
242
|
+
|
|
243
|
+
步骤1：在自定义组件A（cmpType:neo-custom-cmpA）/ 配置文件中定义要共享出来的模块A（xxModule_A）
|
|
244
|
+
```javascript
|
|
245
|
+
module.exports = {
|
|
246
|
+
neoCommonModule: {
|
|
247
|
+
// neoExports: ['xxModule'], // 数组写法，可用于导出第三方依赖模块
|
|
248
|
+
neoExports: { 'xxModule_A': path.resolve('./src/components/xxModule_A') }, // 对象写法，如果导出内容模块，需要使用绝对路径导出
|
|
249
|
+
},
|
|
250
|
+
}
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
步骤2：在自定义组件B（cmpType:neo-custom-cmpB）/ 配置文件中 声明需要使用 自定义组件 A 分享出来的模块（xxModule_A）
|
|
254
|
+
```javascript
|
|
255
|
+
module.exports = {
|
|
256
|
+
neoCommonModule: {
|
|
257
|
+
remotes: ['neo-custom-cmpA'], // 远程自定义组件，表示当前自定义组件 B 会用到的自定义组件
|
|
258
|
+
neoExternals: ['xxModule_A'], // 自定义组件中需要剔除的模块（远程自定义组件中分享出来的模块），仅支持数组写法，需要和 remotes 配合使用
|
|
259
|
+
},
|
|
260
|
+
}
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
步骤3：在自定义组件B 源码中使用 自定义组件 A 分享出来的模块（xxModule_A）
|
|
264
|
+
```javascript
|
|
265
|
+
import ChartWidget from 'chart-widget'; // 导入自定义组件 A 导出的模块
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
|
|
241
269
|
---
|
|
242
270
|
如需更多细节与高级用法，请参考模板项目与源码注释。
|
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: {
|