diff --git a/src/module/amisInit.js b/src/module/amisInit.js index 490617f..5bc7221 100644 --- a/src/module/amisInit.js +++ b/src/module/amisInit.js @@ -14,7 +14,6 @@ const templateList = { 'uniapp-aipage-widget': 'git@github.com:aisuda/uni-custom-widget-template.git', 'uniapp-h5-aipage-widget': 'git@github.com:wibetter/uni-h5-custom-widget-template.git', 'uview-custom-widget': 'git@github.com:aisuda/uview-custom-widget.git', - 'uview-custom-form': 'git@github.com:aisuda/uview-custom-form.git', 'uchart-custom-widget': 'git@github.com:wibetter/uchart-custom-widget.git', 'lottery-custom-widget': 'git@github.com:wibetter/lottery-custom-widget.git', 'vue3-aipage-widget': 'git@github.com:aisuda/vue3-aipage-custom-widget-template.git', diff --git a/src/module/amisInitByCopy.js b/src/module/amisInitByCopy.js index e026a1c..7f0a7f6 100644 --- a/src/module/amisInitByCopy.js +++ b/src/module/amisInitByCopy.js @@ -15,7 +15,6 @@ const templateList = { 'uniapp-aipage-widget': path.resolve(__dirname, '../template/uni-custom-widget-template'), 'uniapp-h5-aipage-widget': path.resolve(__dirname, '../template/uni-h5-custom-widget-template'), 'uview-custom-widget': path.resolve(__dirname, '../template/uview-custom-widget'), - 'uview-custom-form': path.resolve(__dirname, '../template/uview-custom-form'), 'uchart-custom-widget': path.resolve(__dirname, '../template/uchart-custom-widget'), 'lottery-custom-widget': path.resolve(__dirname, '../template/lottery-custom-widget'), 'vue3-aipage-widget': path.resolve(__dirname, '../template/vue3-aipage-custom-widget-template'), diff --git a/src/module/index.js b/src/module/index.js index 81cd5b8..63e310e 100644 --- a/src/module/index.js +++ b/src/module/index.js @@ -128,8 +128,8 @@ let argv = yargs }, { name: 'uview版自定义组件(aipage-editor专用)', - value: 'uview-custom-form', - short: 'uview-custom-form' + value: 'uview-custom-widget', + short: 'uview-custom-widget' }, { name: 'uniapp+H5版组件模板(aipage-editor专用)', diff --git a/src/template/i18n-react-custom-widget-template b/src/template/i18n-react-custom-widget-template deleted file mode 160000 index caac3d5..0000000 --- a/src/template/i18n-react-custom-widget-template +++ /dev/null @@ -1 +0,0 @@ -Subproject commit caac3d533f965e1701373acc292eaaa0f0858090 diff --git a/src/template/i18n-react-custom-widget-template/.editorconfig b/src/template/i18n-react-custom-widget-template/.editorconfig new file mode 100755 index 0000000..7846ea1 --- /dev/null +++ b/src/template/i18n-react-custom-widget-template/.editorconfig @@ -0,0 +1,10 @@ +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true +max_line_length = 80 diff --git a/src/template/i18n-react-custom-widget-template/.gitignore b/src/template/i18n-react-custom-widget-template/.gitignore new file mode 100755 index 0000000..eb9237a --- /dev/null +++ b/src/template/i18n-react-custom-widget-template/.gitignore @@ -0,0 +1,47 @@ +# Numerous always-ignore extensions +*.bak +*.patch +*.diff +*.err + +# temp file for git conflict merging +*.orig +*.log +*.rej +*.swo +*.swp +*.zip +*.vi +*~ +*.sass-cache +*.tmp.html +*.dump + +# OS or Editor folders +.DS_Store +._* +.cache +.project +.settings +.tmproj +*.esproj +*.sublime-project +*.sublime-workspace +nbproject +thumbs.db +*.iml +.vscode/ + +# Folders to ignore +.hg +.svn +.CVS +.idea +node_modules/ +package-lock.json +jscoverage_lib/ + +# log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/src/template/i18n-react-custom-widget-template/.npmrc b/src/template/i18n-react-custom-widget-template/.npmrc new file mode 100644 index 0000000..e7cc3cc --- /dev/null +++ b/src/template/i18n-react-custom-widget-template/.npmrc @@ -0,0 +1,2 @@ +# 发布自定义组件(npm publish)时的npm仓库,可以配置为私服地址(比如:http://registry.npm.baidu-int.com/)。 +#registry=https://registry.npmmirror.com/ diff --git a/src/template/i18n-react-custom-widget-template/.prettierrc.js b/src/template/i18n-react-custom-widget-template/.prettierrc.js new file mode 100755 index 0000000..1f46c62 --- /dev/null +++ b/src/template/i18n-react-custom-widget-template/.prettierrc.js @@ -0,0 +1,12 @@ +/* + prettier 配置文件 + 更多配置信息:https://prettier.io/docs/en/options.html + */ +module.exports = { + semi: true, // Semicolons 分号,默认需要分号 + tabWidth: 2, // 空格,默认 2, + useTabs: false, + singleQuote: true, // 单引号还是双引号,默认为false 双引号 + trailingComma: "all", // 逗号 + jsxBracketSameLine: false, // 默认为false,Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements). +}; diff --git a/src/template/i18n-react-custom-widget-template/README.md b/src/template/i18n-react-custom-widget-template/README.md new file mode 100755 index 0000000..87be81d --- /dev/null +++ b/src/template/i18n-react-custom-widget-template/README.md @@ -0,0 +1,82 @@ +# i18n-react-custom-widget-template +> 国际化版amis自定义组件模板(react技术栈) +备注:[NPM扩展包开发端支持国际化](https://github.com/aisuda/amis-widget-cli/wiki/NPM%E6%89%A9%E5%B1%95%E5%8C%85%E5%BC%80%E5%8F%91%E7%AB%AF%E5%A6%82%E4%BD%95%E6%94%AF%E6%8C%81%E5%9B%BD%E9%99%85%E5%8C%96)。 + +### 目录说明 +- src: 自定义组件源码; +- src/assets: 存放组件静态资源,比如 css、img等; +- src/locale: 存放当前国际化语料数据; +- src/widget: 组件源码; +- src/widget/info-card.jsx: 自定义组件代码; +- src/index.js: 用于注册一个amis渲染器,注册成功后编辑器画布区中才会正常展示自定义组件内容; +- src/widget/plugin/info-card-plugin.jsx: 用于注册一个amis-editor插件,注册成功后编辑器左侧组件面板中会展示; +- src/preview.js: 用于本地预览自定义组件内容; +- amis.config.js: amis-widget-cli配置文件,当前项目webpack配置统一在这里设置; +- i18nConfig.js: 国际化配置文件,比如 百度翻译账户需在这里配置; + +### 开发说明 + +1. **安装依赖** +```bash +$ npm i 或者 yarn +``` + +2. **dev: 本地开发模式(带热更新)** +> dev开发模式:用于在本地editor中调试自定义组件。 +```bash +$ npm run dev +``` + +3. **preview: 组件预览模式(带热更新)** +> preview模式:用于预览自定义组件内容。 +```bash +$ npm run preview +``` + +4. **linkDebug: 外链调试(amis-saas中预览自定义组件)** +> linkDebug模式:用于在amis-saas中预览和调试自定义组件。 +```bash +$ npm run linkDebug +``` +5. **build2lib: 构建自定义组件输出产物** +> build2lib模式:用于构建发布到 npm 中的文件,默认存放到 当前dist目录中。 +```bash +$ npm run build2lib +``` +6. **package.json添加自定义组件信息,导入组件扩展包时需要** +> package.json 中添加 amis-widgets 字段,用于放置当前自定义组件信息,有这个amis-widgets 字段才能被识别为amis组件扩展包。 +```bash + ... + "amis-widgets": [ + { + "name": "react-info-card", // 自定义组件名称,必填项 + "framework": "react", // 技术栈类型,非必填项,默认为 react 技术栈 + "usage": "renderer", // 渲染器类型,非必填项,默认为 renderer + "type": "react-info-card", // 自定义组件类型,必填项,同一应用下不允许有重复的自定义组件类型 + "entry": "/dist/reactInfoCard.umd", // 自定义组件入口文件路径,必填项 + "files": [ // 自定义组件依赖资源文件路径,非必填项 + "/dist/reactInfoCard.css" + ], + "editorPlugin": { // amis-editor自定义插件信息 + "name": "react-info-card-plugin", // 自定义插件名称,在编辑器左侧组件面板作为title展示,必填项 + "description": "信息展示卡片", // 自定义插件描述,在编辑器左侧组件面板作为描述信息展示,必填项 + "pluginEntry": "/dist/reactInfoCardPlugin.umd", // 自定义插件的入口文件,必填项 + "tag": [ // 自定义插件的分类,必填项 + "展示" + ], + "sort": 100 // 自定义插件的排序,非必填项 + } + } + ], + ... +} +``` +7. **发布一个NPM组件扩展包** +> 需要确保package.json中的name值唯一,version值不重复。 +```bash +$ npm publish +``` +8. **发布到制定的NPM仓库** +> 打开NPM配置文件(src/.npmrc),配置为制定仓库地址即可。 +### 配置项说明(amis-widget-cli) +[请查看amis-widget-cli](https://github.com/aisuda/amis-widget-cli) diff --git a/src/template/i18n-react-custom-widget-template/amis.config.js b/src/template/i18n-react-custom-widget-template/amis.config.js new file mode 100755 index 0000000..b98693d --- /dev/null +++ b/src/template/i18n-react-custom-widget-template/amis.config.js @@ -0,0 +1,151 @@ +'use strict'; +const path = require('path'); +// const i18nLoader = require('webpack-react-i18n'); +const i18nConfig = require('./i18nConfig'); + +// 统一路径解析 +function resolve(dir) { + return path.resolve(__dirname, dir); +} + +// 包括生产和开发的环境配置信息 +module.exports = { + settings: { + enableESLint: false, // 调试模式是否开启ESLint,默认开启ESLint检测代码格式 + enableESLintFix: false, // 是否自动修正代码格式,默认不自动修正 + enableStyleLint: false, // 是否开启StyleLint,默认开启ESLint检测代码格式 + enableStyleLintFix: false, // 是否需要StyleLint自动修正代码格式 + }, + webpack: { + resolve: { + // webpack的resolve配置 + extensions: ['.js', '.jsx', '.ts', '.tsx', '.umd.js', '.min.js', '.json'], // 用于配置webpack在尝试过程中用到的后缀列表 + alias: { + '@': resolve('src'), + $assets: resolve('src/assets'), + $public: resolve('public'), + }, + // conditionNames: ['require'] + }, + // sassResources中的sass文件会自动注入每一个sass文件中 + sassResources: [ + resolve('./src/assets/css/common.scss'), + resolve('./src/assets/css/mixin.scss'), + ], + // createDeclaration: true, // 打包时是否创建ts声明文件 + ignoreNodeModules: false, // 打包时是否忽略 node_modules + allowList: [], // ignoreNodeModules为true时生效 + // externals: ['amis-editor'], + projectDir: ['src'], + // template: resolve('./public/template.html'), // dev本地调试时需要html模板 + plugins: [], // 用于添加自定义 plugins + // cssLoaderUrlDir: 'antd', + cssLoaderOption: { + // modules: true + }, + moduleRules: [ + { + test: /.*(ts|tsx|js|jsx)$/, + loader: 'webpack-react-i18n', + options: i18nConfig + } + ], + babelPlugins: (curBabelPlugins) => { + curBabelPlugins.shift(); // 剔除掉 babel-plugin-import,antd5 不需要 + }, + }, + dev: { + entry: { + // 本地编辑器中预览自定义组件 + index: [ + './src/index.js', // widget/info-card.jsx + './src/widget/plugin/info-card-plugin.jsx', + ], + }, + // 用于开启本地调试模式的相关配置信息 + NODE_ENV: 'development', + port: 80, + assetsPublicPath: '/', // 设置静态资源的引用路径(根域名+路径) + assetsSubDirectory: '', + hostname: 'localhost', + proxyTable: { + '/apiTest': { + target: 'http://api-test.com.cn', // 不支持跨域的接口根地址 + ws: true, + changeOrigin: true, + }, + }, + cssSourceMap: true, + closeHotReload: false, // 是否关闭热更新 + // closeEditorClient: false, // 是否关闭自动注入editor + autoOpenBrowser: true, + // editorClient: 'aipage' + }, + preview: { + entry: { + // 本地预览自定义组件内容 + index: './src/preview.js', + }, + // 用于开启本地调试模式的相关配置信息 + NODE_ENV: 'development', + port: 80, + assetsPublicPath: '/', // 设置静态资源的引用路径(根域名+路径) + assetsSubDirectory: '', + hostname: 'localhost', + proxyTable: { + '/apiTest': { + target: 'http://api-test.com.cn', // 不支持跨域的接口根地址 + ws: true, + changeOrigin: true, + }, + }, + cssSourceMap: true, + closeHotReload: false, // 是否关闭热更新 + autoOpenBrowser: true, + }, + linkDebug: { + entry: { + // 外链调试(amis-saas中预览自定义组件) + index: [ + './src/index.js', // widget/info-card.jsx + './src/widget/plugin/info-card-plugin.jsx', + ], + }, + // 用于开启本地调试模式的相关配置信息 + NODE_ENV: 'development', + port: 80, + assetsPublicPath: '/', // 设置静态资源的引用路径(根域名+路径) + assetsSubDirectory: '', + hostname: 'localhost', + proxyTable: { + '/apiTest': { + target: 'http://api-test.com.cn', // 不支持跨域的接口根地址 + ws: true, + changeOrigin: true, + }, + }, + cssSourceMap: true, + closeHotReload: true, // 是否关闭热更新 + autoOpenBrowser: false, + closeHtmlWebpackPlugin: true, // 关闭HtmlWebpackPlugin + }, + build2lib: { + entry: { + // 自定义组件入口文件 + reactInfoCard: './src/index.js', // widget/info-card.jsx + reactInfoCardPlugin: './src/widget/plugin/info-card-plugin.jsx', + }, + // 用于构建生产环境代码的相关配置信息 + NODE_ENV: 'production', // production development + libraryName: 'amisWidget', // 构建第三方功能包时最后导出的引用变量名 + assetsRoot: resolve('./dist'), // 打包后的文件绝对路径(物理路径) + assetsPublicPath: './', // 设置静态资源的引用路径(根域名+路径) + assetsSubDirectory: '', // 资源引用二级路径 + ignoreNodeModules: true, // 打包时是否忽略 node_modules + allowList: [], // ignoreNodeModules为true时生效 + productionSourceMap: false, + productionGzip: false, + productionGzipExtensions: ['js', 'css', 'json'], + bundleAnalyzerReport: false, + }, +}; diff --git a/src/template/i18n-react-custom-widget-template/commitlint.config.js b/src/template/i18n-react-custom-widget-template/commitlint.config.js new file mode 100755 index 0000000..601a644 --- /dev/null +++ b/src/template/i18n-react-custom-widget-template/commitlint.config.js @@ -0,0 +1,59 @@ +/** + * https://www.npmjs.com/package/@commitlint/config-conventional\ + * + * Git提交规范-配置文件 + * Commit message 由Header、Body 和 Footer三个部分组成,其格式如下: + * (): + * + * + * + *