个人网站不备案,辽宁网站制作公司,国际十大市场营销公司,软件网站是怎么做的吗首先一个基础分包方案#xff1a; 包不用区分渠道#xff0c;只是通过文件名进行区分#xff0c;公共代码逻辑可以通过mixins进行混入。
这样分包后就需要在打包时只针对编译的渠道包文件进行替换打包#xff0c;其他渠道包的文件不打包进去#xff0c;通过工具类实现…首先一个基础分包方案 包不用区分渠道只是通过文件名进行区分公共代码逻辑可以通过mixins进行混入。
这样分包后就需要在打包时只针对编译的渠道包文件进行替换打包其他渠道包的文件不打包进去通过工具类实现替换。
项目主目录下的manifest.json 和 pages.json 可以是空内容都是通过工具类将prebuild目录下不同渠道不同平台的对应文件内容复制然后写到项目主目录下去的。
先看主要配置文件
//package.json
{name: demo,config: {dev: cross-env NODE_ENVdevelopment uniapp-cli custom,pro: cross-env NODE_ENVproduction uniapp-cli custom},version: 0.1.0,private: true,scripts: {dev:ks-brandA: cross-env-shell $npm_package_config_dev bd-brandA --minimize,dev:tt-brandA: cross-env-shell $npm_package_config_dev tt-brandA --minimize,dev:bd-brandA: cross-env-shell $npm_package_config_dev ks-brandA --minimize,build:bd-brandA: cross-env-shell $npm_package_config_pro bd-brandA --minimize,build:tt-brandA: cross-env-shell $npm_package_config_pro tt-brandA --minimize,build:ks-brandA: cross-env-shell $npm_package_config_pro ks-brandA --minimize,dev:ks-brandB: cross-env-shell $npm_package_config_dev bd-brandB --minimize,dev:tt-brandB: cross-env-shell $npm_package_config_dev tt-brandB --minimize,dev:bd-brandB: cross-env-shell $npm_package_config_dev ks-brandB --minimize,build:bd-brandB: cross-env-shell $npm_package_config_pro bd-brandB --minimize,build:tt-brandB: cross-env-shell $npm_package_config_pro tt-brandB --minimize,build:ks-brandB: cross-env-shell $npm_package_config_pro ks-brandB --minimize,},dependencies: {dcloudio/uni-app: ^2.0.2-3081220230817001,dcloudio/uni-app-plus: ^2.0.2-3081220230817001,dcloudio/uni-h5: ^2.0.2-3081220230817001,dcloudio/uni-i18n: ^2.0.2-3081220230817001,dcloudio/uni-mp-360: ^2.0.2-3081220230817001,dcloudio/uni-mp-alipay: ^2.0.2-3081220230817001,dcloudio/uni-mp-baidu: ^2.0.2-3081220230817001,dcloudio/uni-mp-jd: ^2.0.2-3081220230817001,dcloudio/uni-mp-kuaishou: ^2.0.2-3081220230817001,dcloudio/uni-mp-lark: ^2.0.2-3081220230817001,dcloudio/uni-mp-qq: ^2.0.2-3081220230817001,dcloudio/uni-mp-toutiao: ^2.0.2-3081220230817001,dcloudio/uni-mp-vue: ^2.0.2-3081220230817001,dcloudio/uni-mp-weixin: ^2.0.2-3081220230817001,dcloudio/uni-mp-xhs: ^2.0.2-3081220230817001,dcloudio/uni-quickapp-native: ^2.0.2-3081220230817001,dcloudio/uni-quickapp-webview: ^2.0.2-3081220230817001,dcloudio/uni-stacktracey: ^2.0.2-3081220230817001,dcloudio/uni-stat: ^2.0.2-3081220230817001,dcloudio/uni-ui: ^1.4.28,vue/shared: ^3.0.0,core-js: ^3.8.3,crypto-js: ^3.1.9-1,flyio: ^0.6.2,vue: 2.6.14 2.7,vuex: ^3.2.0},devDependencies: {dcloudio/types: ^3.3.2,dcloudio/uni-automator: ^2.0.2-3081220230817001,dcloudio/uni-cli-i18n: ^2.0.2-3081220230817001,dcloudio/uni-cli-shared: ^2.0.2-3081220230817001,dcloudio/uni-helper-json: *,dcloudio/uni-migration: ^2.0.2-3081220230817001,dcloudio/uni-template-compiler: ^2.0.2-3081220230817001,dcloudio/vue-cli-plugin-hbuilderx: ^2.0.2-3081220230817001,dcloudio/vue-cli-plugin-uni: ^2.0.2-3081220230817001,dcloudio/vue-cli-plugin-uni-optimize: ^2.0.2-3081220230817001,dcloudio/webpack-uni-mp-loader: ^2.0.2-3081220230817001,dcloudio/webpack-uni-pages-loader: ^2.0.2-3081220230817001,vue/cli-plugin-babel: ~5.0.0,vue/cli-service: ~5.0.0,babel-plugin-import: ^1.11.0,clean-webpack-plugin: ^4.0.0,copy-webpack-plugin: ^11.0.0,cross-env: ^7.0.2,jest: ^25.4.0,less: ^4.1.3,less-loader: ^7.3.0,mini-types: *,miniprogram-api-typings: *,postcss-comment: ^2.0.0,sass: ^1.49.8,sass-loader: ^8.0.2,vue-template-compiler: 2.6.14 2.7,webpack-cli: ^5.1.4,vconsole: ^3.15.0},browserslist: [Android 4.4,ios 9],uni-app: {scripts: {tt-brandA: {env: {UNI_PLATFORM: h5},define: {MP-BRANDA: true}},ks-brandA: {env: {UNI_PLATFORM: mp-kuaishou},define: {MP-BRANDA: true}},tt-brandB: {env: {UNI_PLATFORM: h5},define: {MP-BRANDB: true}},ks-brandB: {env: {UNI_PLATFORM: mp-kuaishou},define: {MP-BRANDB: true}},bd-brandB: {env: {UNI_PLATFORM: mp-baidu},define: {MP-BRANDB: true}},}}
}//src/pages.js:: 直接复制 prebuild下对应brand和平台platform下的pages.js文件
const {getApp,getHostCode} require(../prebuild/env);
const path require(path)
module.exports (pagesJson, loader) {let brandName getApp();let code getHostCode()const srcPath path.join(__dirname, ../prebuild/${brandName}/pages-${code}.js)let pagesJsonNew require(srcPath)loader.addDependency(require.resolve(srcPath))return pagesJsonNew
}//vue.config.js
const fs require(fs);
const CopyWebpackPlugin require(copy-webpack-plugin)
const {CleanWebpackPlugin} require(clean-webpack-plugin)
const {getApp,getOS} require(./prebuild/env);/** 本函数重定向输出路径到下面路径 ** */
function rebuildOutputPath(brand) {let separator getOS() win ? \\ : /const lastIndex process.env.UNI_OUTPUT_DIR.lastIndexOf(separator)let pre process.env.UNI_OUTPUT_DIR.substring(0, lastIndex)console.log(vue.config--buildOutputPath::,process.env.UNI_OUTPUT_DIR.substring(lastIndex))process.env.UNI_OUTPUT_DIR process.env.UNI_OUTPUT_DIR.substring(lastIndex) separator brand
}const brandName getApp()
rebuildOutputPath(brandName)let clearDir [static/img-*]
module.exports {chainWebpack: (config) {//本插件将图片资源目录例如img-brandA 拷贝到输出目录的static/img下面config.plugin(copy).use(CopyWebpackPlugin, [{patterns: [{from: src/static/img-${brandName},to: static/imgs/}]}])//本插件将输出目录下重复无效的/static/img-*目录删除掉config.plugin(clean).use(CleanWebpackPlugin, [{cleanAfterEveryBuildPatterns: clearDir}])//本插件进行预编译相关的拷贝工作拷贝指定brand的manifest和生成build.lessconfig.plugin(CopyPlugin).use(require(./prebuild/CopyPlugin, [{brand: brandName}]))//对目标brand相关的非公用源文件进行监控更新编译的loaderconfig.module.rule(module_replace).test(/\.vue$/).pre().use(./prebuild/module_replace).loader(./prebuild/module_replace).end()}
}// 本代码模块配合module_replace的loader完成【对目标brand相关的非公用源文件进行监控更新编译】
const chokidar require(chokidar);//监测改动时触发编译
const ignoreFiles [];
const brandSign -${brandName}.
const watcher chokidar.watch(src/).on(ready, async () {await watcher.close()chokidar.watch(src/, {ignored: ignoreFiles}).on(change, (path, stats) {console.log(changed file, path);let brandSignIndex path.lastIndexOf(brandSign)let endFix path.substring(brandSignIndex brandSign.length)let preFix path.substring(0, brandSignIndex)let destPath preFix . endFixconst destContent fs.readFileSync(destPath, {encoding: utf-8})fs.writeFileSync(destPath, destContent \n)fs.writeFileSync(destPath, destContent)})
}).on(add, (path) {if (path.indexOf(brandSign) 0) ignoreFiles.push(path)
})vue.config.js 是项目打包入口在里面使用了三个工具类env.js CopyPlugin.js module_replace.js通过不同的brand读取指定brand文件重写到指定文件实现分渠道打包
三个不可缺少工具类
//env.js文件
module.exports {getApp() {if (process.env.UNI_SCRIPT) {const script process.env.UNI_SCRIPTlet subs script.split(-)if (subs.length 2) return subs[1]}console.error(错误未检测到有效的brand名称)return default},makeDateTimeString(date) {let year date.getFullYear();let month date.getMonth() 1;let day date.getDate();if (month 10) month 0 monthif (day 10) day 0 daylet hour date.getHours();let min date.getMinutes();let sec date.getSeconds()if (min 10) min 0 minif (sec 10) sec 0 secreturn ${year}-${month}-${day} ${hour}:${min}:${sec}},getOS() {let host ioslet arch process.env.MSYSTEM_CARCHif (arch x86_64 || arch x86_32) host winreturn host},getHostCode() {if (process.env.UNI_SCRIPT) {const script process.env.UNI_SCRIPTlet subs script.split(-)if (subs.length 2) return subs[0]}console.error(错误未检测到有效的brand名称)return }
}//CopyPlugin.js文件
const fs require(fs);
const path require(path);
const {getApp, getHostCode
} require(./env);class CopyPlugin {log(...param) {console.log(CopyPlugin, ...param)}constructor() {this.log(constructed)}apply(compiler) {compiler.hooks.environment.tap(Manifest, params {let brandName getApp()const platform process.env.UNI_PLATFORMconsole.log(brandName brandName, platform platform)// 构造build.lesslet buildStr brand: brandName ;fs.writeFileSync(src/build.less, buildStr)//复制manifest.jsonlet manifestPath prebuild/${brandName}/manifest.jsonconsole.log(manifestPath,manifestPath)let destManifestPath src/manifest.jsonconst manifestContent fs.readFileSync(manifestPath, {encoding: utf-8});fs.writeFileSync(destManifestPath, manifestContent)})}
}module.exports CopyPlugin//module_replace.js 文件
const {getApp} require(./env);
const fs require(fs);
const tag loader:module-replaceconst brandName getApp()
const brandSign -${brandName}.module.exports function(content) {let resourcePath this.resourcePathlet dotIndex resourcePath.lastIndexOf(.)let endFix resourcePath.substring(dotIndex)let srcPath resourcePath.substring(0, dotIndex) - brandName endFixif (srcPath.indexOf(brandSign) 0) return contentif (!fs.existsSync(srcPath)) return contentconsole.log(tag, replace from, srcPath)const newContent fs.readFileSync(srcPath, {encoding: utf-8});return newContent
}运行打包时只需要控制台中输入package.json中指定的脚本key值即可 npm run dev:tt-barndA npm run build:ks-barndB 按照上述方法分包后即使实现一个项目多平台多渠道打包如有问题请多指教 资源包在下一篇文章
