vue-cil3项目根据进行分环境及多配置打包 背景
在一次国际化需求中 ， 我们需要打出不同的包满足不同语言的需求 ， 如果按照根据不同命令打包 ， 那么.json则会越来越多 ， 例如：
这样的话背离了我们代码的初衷 ， 如果这样写下去 ， 世界这么多语言 ， 我们需要多少命令可以满足？那么到时候的.json中的需要多长？
所以 ， 当我看到的时候 ， 我萌生出了一个大胆的想法：使用交互式命令进行打包的配置；
具体如图：
.js 一款极为友好及便捷的用户与命令行交互工具 。vue-cil脚手架工具也使用了他 ， 详细参考文档vue-cli文档
.js主要功能有：
由于交互的方式不一致 ， 有些是提示输入 ， 有些是叫你选择 ， 因此参数也不一致
例子我就不举了 ， 因为关于的有很多例子可以搜到；
node-cmd
身为一个初级前端 ， node-cmd是通过自己不断试错找到的最好的解决方式
node-cmd npm
关于他的具体描述 ， 我觉得我并没有官方总结的好 ， 因此 ， 具体使用查看官方文档 ， 我这里大致说一下他的使用：
node-cmd拥有两种使用方式：
// 引入var cmd=require('node-cmd');// 通过get的方式 ， 有回调 ， 可以进行下一步操作cmd.get('pwd',function(err, data, stderr){console.log('the current working dir is : ',data)});// run 仅提供需要使用的命令cmd.run('touch example.created.file');
半场总结
目前 ， 稳重具体使用的两个包已经介绍完毕 ， 当然 ， 此处默认安装了cross-env（因为公司项目中必须使用的原因 ， 我也没办法）
具体使用 第一步
在src同级目录下新建build.js文件：
第二步：下载和node-cmd
npm install inquirer -savenpm install node-cmd -save
第三步： build.js

文章插图
为了使配置更加灵活 ， 我将命令行中的问题抽出到src//.js进行了可配置的操作 ， 便于项目的通用性
// 命令行问题抽出进行配置 ， 之后build.js不用动let lang = require('./src/config/config.js');const inquirer = require('inquirer');var cmd = require('node-cmd');var Promise = require('bluebird');const getAsync = Promise.promisify(cmd.get, { multiArgs: true, context: cmd })let promps = lang;var step = 0;var condition = []// 因为配置的不确定性 ， 所以此处做了递归 ， 将根据传入的lang进行比较function selected(step) {if (step < promps.length) {console.log(step);inquirer.prompt(promps[step]).then(async (answers) => {step++;condition.push(answers);return selected(step)})} else {let consoleText = [];let crossText = [];// vue-cil 基础打包命令let npm_run_build = './node_modules/.bin/vue-cli-service build';for (let i = 0; i < condition.length; i++) {consoleText.push(condition[i]['lang']['title'])crossText.push(`${condition[i]['lang']['name']}=${condition[i]['lang']['type']}`);}let build = `./node_modules/.bin/cross-env ENV_file=model-h5 ${crossText.join(' ')} ${npm_run_build}`console.log(`正在打包${consoleText.join('-')}包 ， 请稍等片刻 。。。。。。。。`)getAsync(build).then(data => {console.log('打包成功')}).catch(err => {console.log('打包失败', err)})}}selected(step)// 至此 ， 与用户的所有交互均已完成 ， answers是收集到的用户所填的所有数据

• 上一页
• 1
• 2
• 下一页

• Jupyter 安装与使用
• 基于H5微信小程序的移动网赚项目设计与实现+springboot
• restful和spring整合
• 【abp Vnext】下载并运行abp Vnext项目详细教程文档
• JavaWeb项目查询数据库获得数据显示在jsp页面上
• 使用Yeoman实现vue项目结构创建
• vue-antd-admin管理后台使用教程
• 上海迪斯尼项目
• 一 复现区块链Fabric1.4项目记录安装配置centos8虚拟机
• 六 Angular动态表单生成