\r\n
\r\n🤖\r\n
\r\nfrontengineerplugin\r\n
\r\n
\r\n\r\n\r\n
\r\n
![\"npm](\"https://img.shields.io/static/v1?label=version&message=v0.1.27&color=blue\")
![\"temp\"](\"https://img.shields.io/static/v1?label=Gitee&message=Electrolux&color=red\")
![\"temp\"](\"https://img.shields.io/static/v1?label=Bili&message=Electrolux&color=pink\")
\r\n ![\"demos\"](\"https://img.shields.io/static/v1?label=Author&message=Electrolux&color=yellow\")
\r\n ![\"demos\"](\"https://img.shields.io/static/v1?label=Contribute&message=welcome&color=green\")
\r\n\r\n\r\n
\r\nTranslations: 🇨🇳 汉语\r\n\r\n
\r\n \r\n \r\n![](\"https://cdn.jsdelivr.net/npm/frontengineerplugin/img/main.png\"/)
\r\n\r\n\r\n\r\n## Quickstart\r\n\r\nbegin\r\n\r\n```shell\r\nnpm install frontengineerplugin -g\r\n# 第一种方法，推荐：\r\nnpm run engineer \r\n# 第二种方法：不推荐 项目根目录的package.json中输入\r\nfrontengineerplugin install prettier husky env eslint npm\r\n# 第三种方法：命令行下面 输入\r\nfrontengineerplugin gui\r\n```\r\n\r\n\r\n\r\n## Quesion\r\n\r\n- 如果你遇到Error [ERR_REQUIRE_ESM]: require() of ES Module 的报错。在你的package.json中加入\r\n\r\n```json\r\n\"type\": \"module\",\r\n```\r\n\r\n\r\n\r\n- This file is being treated as an ES module because it has a '.js' file extension and 'D:\\cicd-test\\package.json' contains \"type\": \"module\"\r\n\r\n```json\r\n删掉 \"type\": \"module\", 加入 \"type\": \"commonjs\"\r\n```\r\n\r\n\r\n\r\n\r\n\r\n- 暂时没有适配pnpm的自动script写入，如果你是用这个你需要\r\n\r\n\r\n```shell\r\n# 项目根目录的package.json中添加\r\n{\r\n\t\"engineer\":\"frontengineerplugin gui \"\r\n}\r\n\r\n# 然后运行 npm run engineer\r\n```\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n## Contain\r\n\r\n![](\"https://cdn.jsdelivr.net/npm/frontengineerplugin/img/main.png\")
\r\n\r\n\r\n\r\n### husky\r\n\r\n```shell\r\n限制了只能用如下参数进行提交\r\n```\r\n\r\n- feat: 新功能 (feature)\r\n- fix:修补bug\r\n- docs:文档 (documentation)\r\n- style:格式(不影响代码运行的变动)\r\n- refactor: 重构(即不是新增功能，也不是修改bug的代码变动)\r\n- chore:构建过程或辅助工具的变动revert: 撤销，版本回退\r\n- perf:性能优化\r\n- test:测试\r\n- improvement:改进\r\n- update:\r\n- build: 打包\r\n- ci: 持续集成\r\n\r\n### prettier\r\n\r\n```js\r\nmodule.exports = {\r\n printWidth: 80,\r\n // 使用单引号而非双引号；\r\n singleQuote: true,\r\n tabWidth: 2,\r\n proseWrap: 'never',\r\n // 在语句末尾添加分号；\r\n Semicolons: true,\r\n overrides: [{ files: '.prettierrc', options: { parser: 'json' } }],\r\n};\r\n\r\n```\r\n\r\nmore refer:https://www.prettier.cn/\r\n\r\n### env\r\n\r\n```js\r\n\r\ncross-env ENV=production max dev\r\n\r\nvar proEnv = require('./config/production.env'); // 生产环境\r\nvar testEnv = require('./config/test.env'); // 测试环境\r\nvar devEnv = require('./config/development.env'); // 本地环境\r\n\r\n\r\nconst env = process.env.ENV;//当前环境\r\nlet URL_COMMON = '';//路径\r\nlet URL_RESOURCE = '';//路径\r\n\r\n// 默认是本地环境\r\nif (env === 'production') { // 生产环境\r\n console.log(\"----------生产环境----------\");\r\n URL_COMMON = proEnv.URL_COMMON;\r\n URL_RESOURCE = proEnv.URL_RESOURCE\r\n} else if (env === 'test') { // 测试环境\r\n console.log(\"----------测试环境----------\");\r\n URL_COMMON = testEnv.URL_COMMON;\r\n URL_RESOURCE = testEnv.URL_RESOURCE\r\n} else if( env ==='development') { // 开发环境\r\n console.log(\"----------开发环境----------\");\r\n URL_COMMON = devEnv.URL_COMMON;\r\n URL_RESOURCE = devEnv.URL_RESOURCE\r\n}\r\n\r\n```\r\n\r\n\r\n\r\n### eslint\r\n\r\n```js\r\n// npm install babel-eslint --save\r\nmodule.exports = {\r\n root: true,\r\n env: {\r\n browser: true,\r\n node: true,\r\n },\r\n extends: [\r\n // 额外添加的规则可查看 https://vuejs.github.io/eslint-plugin-vue/rules/\r\n // 'plugin:vue/essential', //加了这个才能当作vue来进行解析，不然只会当成js来进行解析 eslint-plugin-react\r\n ],\r\n\r\n //不加这个会报错Parsing error: The keyword 'import' is reserved\r\n parserOptions: {\r\n // 指定解析器 parser\r\n ecmaVersion: 8,\r\n sourceType: 'module',\r\n // \"parser\": 'babel-eslint',\r\n // sourceType: 'module',\r\n // ecmaVersion: 12,\r\n // allowImportExportEverywhere: true, // 不限制eslint对import使用位置\r\n },\r\n settings: {},\r\n // 取消没必要的校验 0 是 不报错 ， 1是warn 2 是punishing\r\n\r\n // \"off\"或者0 //关闭规则关闭\r\n // \"warn\"或者1 //在打开的规则作为警告（不影响退出代码）\r\n // \"error\"或者2 //把规则作为一个错误（退出代码触发时为1）\r\n rules: {\r\n // \"camelcase\": [\"error\", { \"allow\": [\"aa_bb\"] }], // 属性名\r\n // \"max-lines\": [\"error\", {\"max\": 20, \"skipComments\": true}], // 每一个文件最多的行数\r\n // \"no-console\": 2,//禁止使用console\r\n\r\n // \"no-mixed-spaces-and-tabs\": [2, false],//禁止混用tab和空格\r\n // \"no-multiple-empty-lines\": [1, {\"max\": 2}],//空行最多不能超过2行\r\n // \"no-multi-spaces\": 1,//不能用多余的空格\r\n\r\n // \"indent\": [1, 4],//缩进风格 缩进四个空格\r\n // \"max-lines-per-function\": [0, { \"max\": 2 }], // 指定每个function最多多少行\r\n 'no-unused-vars': 2, //没被使用\r\n 'consistent-return': 0, // 有函数返回值\r\n 'no-underscore-dangle': 0, // 不允许有下划线\r\n 'no-plusplus': 1, // 不能用++\r\n 'no-eval': 0, // 不能用eval\r\n 'linebreak-style': [0, 'error', 'window'], // 换行风格\r\n camelcase: 'warn', //像是xx_xx这种会报错\r\n },\r\n // 这里可以配置具体后缀的规则\r\n overrides: [\r\n {\r\n files: ['*.js'],\r\n // extends: ['alloy'],\r\n rules: {\r\n 'no-unused-vars': 0, //没被使用\r\n },\r\n },\r\n ],\r\n};\r\n\r\n```\r\n\r\nmore refer:http://eslint.cn/\r\n\r\n### npm\r\n\r\n```js\r\n指定.npmrc\r\n```\r\n\r\n\r\n\r\n### cicd\r\n\r\n```\r\n目前这个文件夹是放置一些脚本的。\r\n包括部署和项目结构优化的脚本\r\n```\r\n\r\n\r\n\r\n### test\r\n\r\n```\r\n里面分成两个文件夹.主要使用jest做的\r\n\r\n主要是有工具类js ，ts 的测试。\r\n以及web-component之类的测试\r\n```\r\n\r\n\r\n\r\n\r\n\r\n### node_proxy\r\n\r\n```\r\n集成了三种方法来做跨域。一般如果你做脚本的话，可以下载下来做插件的端口转发\r\n```\r\n\r\n\r\n\r\n### standard_readme\r\n\r\n```json\r\n帮助你生成标准 README.md 的 东西。\r\n注意。提前要填写好你package.json 的name version homepage 三个字段\r\n然后注意 如果项目中有 README.md 需要先删掉\r\n\r\n默认会生成 author 和 packageName 的label(就是一开始下面并列的牌子)\r\n如果你想要添加自己的label 可以在package.json中添加 如下格式字段\r\n\r\n\"label\": [\r\n {\r\n \"frontName\": \"Gitee\",\r\n \"behindName\": \"Electrolux\",\r\n \"src\": \"https://gitee.com/Electrolux\",\r\n \"color\": \"red\"\r\n },\r\n {\r\n \"frontName\": \"Bili\",\r\n \"behindName\": \"Electrolux\",\r\n \"src\": \"https://space.bilibili.com/286773126\",\r\n \"color\": \"Pink\"\r\n }\r\n],\r\n```\r\n\r\n\r\n\r\n## Developer\r\n\r\n```js\r\n一开始安装的时候会通过package.json的bin字段执行 install.js\r\n\r\n如果你想添加你自己工程化的东西\r\n--1.首先将你的文件放进file 文件夹\r\n--2.修改project.js的 guiFn 方法和 增加 util/handleEvent.js导出的方法\r\n--3.接下来的测试阶段请输入npm link \r\n然后 npm run engineer \r\n\r\n```\r\n\r\n\r\n\r\n## Example\r\n\r\n### COMMIT and CHANGELOG\r\n\r\n```SHELL\r\n# first \r\nnpm install frontengineerplugin -g\r\nnpm run engineer\r\n# THEN \r\nselect CICD and husky\r\n# THEN \r\nGO to dir .husky/commit-msg \r\n然后把 os.system(\"node CICD/CHANGELOG/changeLogAdd.js \" + line) 前面的判断符号改成 true\r\n# THEN\r\nGO to dir CICD/CHANGELOG/changeLogAdd \r\n然后 把 isAutoUpDate 改成 true\r\n```\r\n\r\n\r\n\r\n### COMMIT and Update Readme.md\r\n\r\n\r\n\r\nif you allow my readme.md script ,then you can\r\n\r\n```SHELL\r\n# first \r\nnpm install frontengineerplugin -g\r\nnpm run engineer\r\n# THEN \r\nselect CICD \r\n# THEN \r\nGO to dir .husky/commit-msg \r\n然后把 os.system(\"node CICD/readmeUpdate/readmeUpdate.js\") 前面的判断符号改成 true\r\n# THEN\r\nGO to dir CICD/readmeUpdate/readmeUpdate.js\r\n然后 把 line 和 resText 进行 替换\r\n```\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n## Badge\r\n\r\n[](https://gitee.com/Electrolux)\r\n\r\n```\r\n[](https://gitee.com/Electrolux)\r\n```\r\n\r\n\r\n\r\n## Support\r\n\r\nfrontEngineerPlugin is developed by me. Please use frontEngineerPlugin, star it on gitee or even become a [sponsor](https://gitee.com/Electrolux) to support us!\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","repository":{"type":"gitee","url":"https://gitee.com/electrolux/front-engineer-plugin"},"author":{"name":"Electrolux"},"homepage":"https://gitee.com/electrolux/front-engineer-plugin"}