阅读之前
你应该：
- 了解node与npm相关内容
- 了解lerna包管理工具的相关内容
- 了解git仓库的相关内容
- 了解rollup的相关内容
工程结构包示例
Vue项目结构包下载-v4.7.x
Vue项目结构包下载-v5.2.x
工程结构详解
工程结构
├── packages
│ ├── kunlun-mobile-boot
│ │ ├── package.json
│ │ ├── public
│ │ │ ├── favicon.ico
│ │ │ └── index.html
│ │ ├── src
│ │ │ ├── main.ts
│ │ │ └── shim-vue.d.ts
│ │ ├── tsconfig.json
│ │ └── vue.config.js
│ ├── kunlun-module-mobile-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-mobile-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-mobile-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-mobile-demo工程会使用一个独立的git仓库进行管理。
通过kunlun-module-mobile-demo打包生成的@kunlun/module-mobile-demo包，将可以被发布到npm仓库或其他地方，供其他工程或项目使用。
在启动工程中的package.json中添加"@kunlun/module-mobile-demo": "~1.0.0"相关依赖进行引入。并在入口文件main.ts中导入相关的js和css相关内容。
如示例中所示：
// 按需引入
import '@kunlun/module-mobile-demo/dist/kunlun-module-mobile-demo.css';
import '@kunlun/module-mobile-demo';需要注意的是，在本地开发中，css文件相关内容应该是被临时注释的，因为通过import '@kunlun/module-mobile-demo';已经将相关内容引入，无需使用打包好的css文件。
多工程包管理
├── packages
│ └── kunlun-modules-mobile-demo
│ ├── scripts
│ │ ├── build.config.js
│ │ ├── postpublish.js
│ │ └── prepublish-only.js
│ ├── packages
│ │ ├── module-mobile-demo1
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ ├── rollup.config.js
│ │ │ └── src
│ │ │ ├── index.ts
│ │ │ └── shim-vue.d.ts
│ │ ├── module-mobile-demo2
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ ├── rollup.config.js
│ │ │ └── src
│ │ │ ├── index.ts
│ │ │ └── shim-vue.d.ts
│ │ └── module-mobile-dependencies
│ │ ├── index.ts
│ │ ├── package.json
│ │ └── src
│ │ └── dependencies.ts
│ ├── lerna.json
│ ├── tsconfig.json
│ └── package.json
├── lerna.json
└── package.json与单工程包管理类似，多工程包管理方案为了解决整体结构复杂，并且功能需要做最小化拆分的场景。在多工程包中提供的module-dependencies作为整个工程包的总入口向外提供功能。
如示例中所示：
// 视情况按需引入
// import '@kunlun/module-mobile-demo/dist/kunlun-module-mobile-demo1.css';
// import '@kunlun/module-mobile-demo/dist/kunlun-module-mobile-demo2.css';
import '@kunlun/modules-mobile-dependencies';与单工程包唯一的区别在于启动工程的导入方式有所不同，仅需通过import '@kunlun/modules-mobile-dependencies';导入所有功能即可。在总入口处将对所有子工程包进行统一的导出并且包含了对应的css相关内容。
特别的是，如果多个工程间的css样式出现冲突，但又需要依赖js文件时，css相关内容将不能在总入口处进行导入，需要放在对应的启动工程中进行导入处理。原则上，我们应该避免这种情况的发生。
启动工程
├── packages
│ └── kunlun-mobile-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 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;转换结果：@kunlun/module-mobile-demo -> kunlun-module-mobile-demo.esm.js
多工程包构建脚本的使用
方法签名
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',
'vant',
'@ant-design/icons-vue',
'@kunlun/mobile-dependencies',
'@kunlun/vue-ui-mobile-vant'
], false);- pkg.name：通过当前路径的
package.json获取name属性。 - external：打包时排除当前工程中导入的第三方包，原则上需要全部排除，否则会出现内存变量不一致的问题。
- hasSCSS：是否进行scss编译。当使用scss时，必须开启。
- extendPlugins：扩展插件。
Oinone社区 作者：nation原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/49.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
