UniApp集成微信小程序原生分包

背景

公司用 uniapp 开发了一个微信小程序，采购了第三方一部分功能，第三方提供了一些微信的代码，建议使用分包加载。

项目目录结构

wx-thrid-sdk 即第三方提供的分包代码

├── App.vue
├── wx-thrid-sdk
├── index.html
├── main.js
├── manifest.json
├── node_modules
├── package-lock.json
├── package.json
├── pages
├── pages.json
├── static
└── uni.scss

实现思路

1. 使用uniapp提供的分包配置方式，配置之后在编译的时候会寻找 wx-thrid-sdk 内的 .vue 文件，但是分包内都是微信的原生代码，所以这里找不到会报错

2. 既然不能在编译的时候做文章，那就只能在编译之后了

查看uniapp官网，支持在根目录下创建 vue.config.js 文件，配置 webpack 的一些编译选项

uni-app官网 vue-config.js

既然支持 webpack， 就可以在 webpack 编译之后，把分包的代码复制到最终生成的代码目录下，并且修改一下生成的微信的 app.json 文件，将分包的配置加入进去即可完成集成。

1. 创建 vue.config.js

module.exports = {
	configureWebpack: {
		plugins: []
	}
}

2. 复制分包的代码到最终生成的代码目录下

使用 copy-webpack-plugin 即可满足我们的需求，安装

npm install [email protected] --save-dev

module.exports = {
	configureWebpack: {
		plugins: [
            new CopyWebpackPlugin([
			    {
				    from: path.join(__dirname, 'wx-thrid-sdk'),
				    to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'wx-thrid-sdk')
			    }
		    ]),    
        ]
	}
}

3. 修改最终编译生成的 app.json 文件，修改 webpack 生成的代码，可以通过 webpack plugin 完成，自定义一个 webpack 插件

class CopyOriginSubPackagePlugin {
	constructor(subPackagesOptions = {}) {
        // 微信原生的分包配置规则
		this.subPackagesOptions = subPackagesOptions;
	}
	
	apply(compiler) {
		const that = this;
		
		compiler.hooks.emit.tap("CopyOriginSubPackage", (compilation) => {
			// 找到app.json文件
			const appJsonAssets = compilation.assets["app.json"];
			if (!appJsonAssets) { return }
			try {
				// app.json文件内容转成json格式
				const source = JSON.parse(appJsonAssets.source());
				// 添加一个默认的subPackages
				const subPackages = (source.subPackages = source.subPackages || []);
				// 把要集成的分包添加到app.json中
				subPackages.push(that.subPackagesOptions);
				// 将修改后的内容写入到文件中
				const fileContent = JSON.stringify(source, null, 2);
				compilation.assets["app.json"] = {
					source() {
						return fileContent;
					},
					size() {
						return fileContent.length;
					}
				}
			} catch(e) {
				console.log("[CopyOriginSubPackagePlugins Error]", e)
			}
		})
	}
}
module.exports = {
	configureWebpack: {
		plugins: [
			new CopyWebpackPlugin([
				{
					from: path.join(__dirname, 'wx-thrid-sdk'),
					to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'wx-thrid-sdk')
				}
			]),
			new CopyOriginSubPackagePlugin({
				root: "wx-thrid-sdk",
				pages: [
					"pages/test/index",
				]
			})
		]
	}
}

4. 这个sdk是只有在编译成微信小程序的时候才需要编译到最终的输出中，所以这里需要区分一下环境

const plugins = [];
if (process.env.UNI_PLATFORM === 'mp-weixin') {
	plugins.push(
		new CopyWebpackPlugin([
			{
				from: path.join(__dirname, 'wx-thrid-sdk'),
				to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'wx-thrid-sdk')
			}
		]),
		new CopyOriginSubPackagePlugin({
			root: "wx-thrid-sdk",
			pages: [
				"pages/test/index", // 导览 
			]
		})
	)
}

module.exports = {
	configureWebpack: {
		plugins
	}
}

webpack 的配置这样就可以了，再次编译成微信小程序的时候就不会在报错，并且在生成的微信小程序代码中也已经有了分包的配，同理可以集成任何平台代码。