在完成elpis的基础搭建后,需要将其抽离为npm包体现其80%的沉淀部分
elpis-core改造
elpis-core中的各种loader牵扯到原先框架中处理app业务下各个文件的,都要具备读取业务方和框架自身app目录下的能力,例如controller中,从而将框架与用户自定义内容结合起来
//读取elpis/app/controller文件夹下的所有文件
const elpisControllerPath = path.resolve(__dirname,`..${sep}..${sep}app${sep}controller`)
const elpisFileList = glob.sync(path.resolve(elpisControllerPath,`.${sep}**${sep}**.js`))
elpisFileList.forEach(file => {
handleFile(file)
})
//读取业务/app/controller文件夹下的所有文件
const businessControllerPath = path.resolve(app.bussinessPath,`.${sep}controller`)
const businessFileList = glob.sync(path.resolve(businessControllerPath,`.${sep}**${sep}**.js`))
businessFileList.forEach(file => {
handleFile(file)
})
针对前端工程化进行改造
使用require.resolve()的写法去解析框架自身所引用的各种webpack的配置和loader,不然用户使用框架还需要自行下载框架使用到的loader,这显然不现实。改造包含webpack目录下的所有文件,同时原先的dev与prod文件中的配置作为方法通过modelu.export 暴露出去,在用户方通过根目录下的build.js文件进行调用。总之使用到框架内容的地方,文件路径要改为__dirname,在用户方生成产物的文件路径还是保持process.cwd()
例如webpack.base.js中的入口文件路径:
module:{
rules: [{
test:/\.vue$/,
use: {
loader: require.resolve('vue-loader'),
}
}]
}
build.js文件:
const {frontendBuild} = require('@krabby_lee/elpis');
//编译构建前端工程
frontendBuild(process.env._ENV);
用户端的package.json文件:
{
"name": "elpis-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "cross-env _ENV=local nodemon ./server.js",
"beta": "cross-env _ENV=beta node ./server.js",
"prod": "cross-env _ENV=production node ./server.js",
"build:dev": "cross-env _ENV=local --max_old_space_size=4096 node ./build.js",
"build:prod": "cross-env _ENV=production node ./build.js"
},
"repository": {
"type": "git",
"url": "https://e.coding.net/g-ccot4994/elips/elpis-demo.git"
},
"author": "KRABby",
"license": "ISC",
"devDependencies": {
"cross-env": "^7.0.3",
"nodemon": "^3.1.10"
}
}
发布npm包
npm config set registry——清空源npm login——登录npmnpm publish --access public——首次推送要加公共包的标记,之后再发布的时候就可以直接npm publish