EMP 梳理记录

Posted 2021-10-05 anYun

本文章主要记录emp的使用过程，包含一下知识点：

• 脚手架搭建
• lerna 基本使用方法
• NPM包发布
• WebPack 知识点

准备工作

安装lerna：npm install --global lerna
克隆emp：git clone https://github.com/efoxTeam/emp.git
安装依赖包：cd emp && lerna bootstrap

修改记录

全局搜索 - 替换为 +

- "repository": "https://github.com/efoxTeam/emp.git",
+ "repository": "https://gitee.com/micro-front-end/emp.git",
- "author": "ken <[e-mail]>",
+ "author": "jenkin",
- "url": "git+https://github.com/efoxTeam/emp.git",
+ "url": "git+https://gitee.com/micro-front-end/emp.git",
- @efox/
+ @jkyu/

packages/emp-cli/bin/emp.js

 const table = new Table({
    head: [\'Emp & Deps\', \'Version\'],
+   colWidths:[50,50],
 ......

微服务模版

创建仓库地址: https://gitee.com/micro-front-end/react-main.git
克隆仓库: git clone https://gitee.com/micro-front-end/react-main.git
初始化package.json: npm init -y
安装dependencies核心包:

npm install --save react react-dom react-router-dom
npm install @ant-design/icons antd --save
npm install --save mobx mobx-react
npm install --save moment

安装devDependencies核心包:

npm install -D @babel/plugin-proposal-export-default-from babel-eslint babel-plugin-react-css-modules
npm install -D @types/react @types/react-dom @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm install -D eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import
npm install -D  eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
npm install -D postcss-less less-plugin-clean-css deepmerge
npm install -D @commitlint/cli @commitlint/config-conventional

删除无用模块:
rm -rf packages/js-demo packages/vue3-jsx
rm -rf packages/emp-frameworks/cocos2d packages/emp-frameworks/angular

VS code 调试

调试JS

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
       {
        "type": "node",
        "request": "launch",
        "name": "启动程序",
        "skipFiles": ["<node_internals>/**"],
        "console": "integratedTerminal",
        "program": "packages/emp-cli/bin/emp.js",
        "args": ["dev"]
       } 
    ]
}

参考

npm模块管理器
使用lerna管理大型前端项目
commitlint+husky规范commit 日志
cli-table3
React Helmet
webpack-chain
React CRA描述