【前端】工程结构最佳实践（v4）

阅读之前

你应该：

• 了解node与npm相关内容
• 了解lerna包管理工具的相关内容
  • 官方文档
• 了解git仓库的相关内容
• 了解rollup的相关内容

工程结构包示例

Vue项目结构包下载

工程结构详解

工程结构

├── packages
│   ├── kunlun-boot
│   │   ├── package.json
│   │   ├── public
│   │   │   ├── favicon.ico
│   │   │   └── index.html
│   │   ├── src
│   │   │   ├── main.ts
│   │   │   └── shim-vue.d.ts
│   │   ├── tsconfig.json
│   │   └── vue.config.js
│   ├── kunlun-module-demo
│   │   ├── scripts
│   │   │   ├── postpublish.js
│   │   │   └── prepublish-only.js
│   │   ├── src
│   │   │   ├── index.ts
│   │   │   └── shim-vue.d.ts
│   │   ├── index.ts
│   │   ├── package.json
│   │   ├── rollup.config.js
│   │   └── tsconfig.json
│   └── kunlun-modules-demo
│       ├── scripts
│       │   ├── build.config.js
│       │   ├── postpublish.js
│       │   └── prepublish-only.js
│       ├── packages
│       │   ├── module-demo1
│       │   │   ├── index.ts
│       │   │   ├── package.json
│       │   │   ├── rollup.config.js
│       │   │   └── src
│       │   │       ├── index.ts
│       │   │       └── shim-vue.d.ts
│       │   ├── module-demo2
│       │   │   ├── index.ts
│       │   │   ├── package.json
│       │   │   ├── rollup.config.js
│       │   │   └── src
│       │   │       ├── index.ts
│       │   │       └── shim-vue.d.ts
│       │   └── module-dependencies
│       │       ├── index.ts
│       │       ├── package.json
│       │       └── src
│       │           └── dependencies.ts
│       ├── lerna.json
│       ├── tsconfig.json
│       └── package.json
├── lerna.json
└── package.json

壳工程

├── packages
│   └── ......
├── lerna.json
└── package.json

壳工程仅用于将多个包进行统一安装，并通过lerna包管理工具进行相关的软链接操作。

壳工程包含了除了node和npm外其他相关的安装依赖，如lerna、rimraf等。这样可以避免由于开发环境差异带来的一系列问题。

我们建议所有开发人员均使用相同的壳工程进行开发，因此，我们有必要将其提交并推送到git远程仓库进行共享。

在壳工程目录下执行npm install命令即可完成一系列安装操作。

需要注意的是，lerna.json中定义了所有需要统一安装的子工程路径，安装前需要确认是否满足当前需要，但这些修改都应该只在本地完成，而不应该推送到git远程仓库。

安装完成后，所有公共依赖均会安装在壳工程的node_modules目录下，每个子工程的node_modules中仅包含软链接目录。并且在壳工程的node_modules目录下不会出现本地已经存在的工程依赖。

单工程包管理

├── packages
│   └── kunlun-module-demo
│       ├── scripts
│       │   ├── postpublish.js
│       │   └── prepublish-only.js
│       ├── src
│       │   ├── index.ts
│       │   └── shim-vue.d.ts
│       ├── index.ts
│       ├── package.json
│       ├── rollup.config.js
│       └── tsconfig.json
├── lerna.json
└── package.json

作为一个独立的工程，它可以是一个项目的总工程，也可以是多个项目共同使用的子工程。这也是最常见的工程包结构。

通常情况下，kunlun-module-demo工程会使用一个独立的git仓库进行管理。

通过kunlun-module-demo打包生成的@kunlun/module-demo包，将可以被发布到npm仓库或其他地方，供其他工程或项目使用。

在启动工程中的package.json中添加"@kunlun/module-demo": "~1.0.0"相关依赖进行引入。并在入口文件main.ts中导入相关的js和css相关内容。

如示例中所示：

// 按需引入
import '@kunlun/module-demo/dist/kunlun-module-demo.css';

import '@kunlun/module-demo';

需要注意的是，在本地开发中，css文件相关内容应该是被临时注释的，因为通过import '@kunlun/module-demo';已经将相关内容引入，无需使用打包好的css文件。

多工程包管理

├── packages
│   └── kunlun-modules-demo
│       ├── scripts
│       │   ├── build.config.js
│       │   ├── postpublish.js
│       │   └── prepublish-only.js
│       ├── packages
│       │   ├── module-demo1
│       │   │   ├── index.ts
│       │   │   ├── package.json
│       │   │   ├── rollup.config.js
│       │   │   └── src
│       │   │       ├── index.ts
│       │   │       └── shim-vue.d.ts
│       │   ├── module-demo2
│       │   │   ├── index.ts
│       │   │   ├── package.json
│       │   │   ├── rollup.config.js
│       │   │   └── src
│       │   │       ├── index.ts
│       │   │       └── shim-vue.d.ts
│       │   └── module-dependencies
│       │       ├── index.ts
│       │       ├── package.json
│       │       └── src
│       │           └── dependencies.ts
│       ├── lerna.json
│       ├── tsconfig.json
│       └── package.json
├── lerna.json
└── package.json

与单工程包管理类似，多工程包管理方案为了解决整体结构复杂，并且功能需要做最小化拆分的场景。在多工程包中提供的module-dependencies作为整个工程包的总入口向外提供功能。

如示例中所示：

// 视情况按需引入
// import '@kunlun/module-demo/dist/kunlun-module-demo1.css';
// import '@kunlun/module-demo/dist/kunlun-module-demo2.css';

import '@kunlun/modules-dependencies';

与单工程包唯一的区别在于启动工程的导入方式有所不同，仅需通过import '@kunlun/modules-dependencies';导入所有功能即可。在总入口处将对所有子工程包进行统一的导出并且包含了对应的css相关内容。

特别的是，如果多个工程间的css样式出现冲突，但又需要依赖js文件时，css相关内容将不能在总入口处进行导入，需要放在对应的启动工程中进行导入处理。原则上，我们应该避免这种情况的发生。

启动工程

├── packages
│   └── kunlun-boot
│       ├── package.json
│       ├── public
│       │   ├── favicon.ico
│       │   └── index.html
│       ├── src
│       │   ├── main.ts
│       │   └── shim-vue.d.ts
│       ├── tsconfig.json
│       └── vue.config.js
├── lerna.json
└── package.json

作为vue项目的启动工程，它应该仅用于工程组合，即选择性的使用某几个工程进行启动。

rollup脚本简述

通过package.json构建所需工程名称

const packagePrefix = 'kunlun-';

const buildName = (name) => {
  const libraryName = name.replace('@', '').replace('/', '-');
  const pathName = libraryName.substring(packagePrefix.length);
  const camelCaseName = libraryName.replace(/-(\w)/g, (all, letter) => letter.toUpperCase());
  return { libraryName, pathName, camelCaseName };
};

使用方法：

import pkg from './package.json';

const res = buildName(pkg.name);
const libraryName = res.libraryName;

转换结果：

• libraryName：@kunlun/module-demo -> kunlun-module-demo
• pathName：@kunlun/module-demo -> module-demo
• camelCaseName：@kunlun/module-demo -> kunlunModuleDemo

这三个名称在单工程和多工程中都有使用，以实现统一脚本命令的自动化构建。

需要注意的是：

• 在package.json中使用的名称需要手动和packagePrefix定义的变量进行匹配。
• 在多工程中，每个子工程目录对应的名称应该与pathName属性完全一致。

多工程包构建脚本的使用

方法签名

function rollupConfig(name = '', external = [], hasSCSS = true, extendPlugins)

示例脚本

import pkg from './package.json';
import rollupConfig from '../../scripts/build.config.js';

export default rollupConfig(pkg.name, [
  'vue',
  'lodash-es',
  'ant-design-vue',
  '@ant-design/icons-vue',
  'element-plus',
  '@element-plus/icons-vue',
  '@kunlun/dependencies',
  '@kunlun/vue-ui-antd',
  '@kunlun/vue-ui-el'
], false);

• pkg.name：通过当前路径的package.json获取name属性。
• external：打包时排除当前工程中导入的第三方包，原则上需要全部排除，否则会出现内存变量不一致的问题。
• hasSCSS：是否进行scss编译。当使用scss时，必须开启。
• extendPlugins：扩展插件。