大家好,我是wo不是黄蓉,今年学习目标从源码共读开始,希望能跟着若川大佬学习源码的思路学到更多的东西。
接上节内容,上节写的程序还有每次只能实现一个模块的打包且不能动态的
目标:我们要实现一个可以自动遍历目录下的文件夹,并且每次可以自动帮我们把所有模块的包都打包下来。
实现思路:最终还是按照npm run build modelA
这样的方式来执行的,不过是让程序帮我们实现多条可执行的命令,然后挨个执行即可。
什么文件是可执行
shell
脚本的呢?
写一个.sh
的文件,里面的命令就是我们挨个执行的命令。从公司组件库打包发布中学来的(所以还是要多学多看别人得代码,然后找到一个点自己实现,然后就可以发现其中得乐趣就不会学起来很吃力)
要怎么生成脚本命令呢?
使用node
提供的fs
模块,将读取到的模块存储到数组里面,然后遍历数组就获取到了文件夹名,然后遍历文件夹名就获得到了模块名。
此时我们需要修改一下vue.config.js
的配置信息,将入口和从出口文件都改成动态的即可
const { defineConfig } = require("@vue/cli-service")
let projectName = process.argv[3]
module.exports = defineConfig({
transpileDependencies: true,
publicPath: "./",
outputDir: `./dist/${projectName}`,
pages: {
index: {
entry: `./src/views/${projectName}/index.js`,
//指定模板
template: "./public/index.html",
//动态设置模板id
templateID: projectName,
},
},
})
编写生成脚本命令的文件,build.cjs
const fs = require("fs")
const path = require("path")
//基础路径配置
const BASE_URL = path.resolve(__dirname)
//获取文件夹也就是模块名
function getDirs(realPath) {
return new Promise((resolve, reject) => {
fs.readdir(realPath, (err, files) => {
resolve(files)
})
})
}
//读取模块路径
const dirPath = path.join(BASE_URL, "../src/views")
const files = []
let shell = ""
getDirs(dirPath).then((res) => {
const dirs = res
//每次进去的时候先清空
fs.writeFile(path.join(BASE_URL, "./release.sh"), "", "utf-8", () => {
dirs.forEach((dir) => {
shell += `npm run build ${dir} \n`
fs.writeFile(
path.join(BASE_URL, "./release.sh"),
shell,
"utf-8",
(err) => {
if(err) return
console.log("文件写入成功")
}
)
})
})
})
在package.json中配置快速执行命令:
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:entry": "node ./bin/build1.cjs && npm run build:bash",
"build:bash": "sh ./bin/release.sh",
"lint": "vue-cli-service lint"
},
打包执行结果如图所示:
image.png
网友评论