Wuxh

Front-end Development

0%

node.js 获取控制台中命令行参数

postcss style.css -r viewportWidth=750; 如何获取到 viewportWidth=750 这个参数呢

场景需要

公司之前的项目使用的是*.less样式文件,然后在浏览器直接引入;

使用less.js文件在浏览器中解析运行;如何在浏览器中使用less

  • 引入*.lessless.js文件
1
2
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js"></script>

我选择使用打包编译的方式对less文件进行编译,然后使用postcss压缩
把之前项目中 3000 行代码200kb使用cssnano进行压缩,使其60kb;

方法一

1
2
3
4
5
6
7
8
const arguments = process.argv.reduce((a, b, index) => {
if (/^[^=]*=[^=]*$/.test(b)) {
const arr = b.split('=');
a[arr[0]] = arr[1];
}
return a;
}, {});
console.log(arguments);

这样我就可以获取到所有命令行中的参数了, 在后面的代码中我可以这样去使用;

1
2
3
4
// ...
minPixelValue: arguments.minPixelValue || 2;
viewportWidth: arguments.viewportWidth || 1024;
// ....

方法二

Vue 项目中,使用 jenkins 构建部署,需要修改 publicPath 和 vue-router.base

1
2
3
4
5
6
7
8
9
10
11
12
module.exports.npmConfigArgv = {};
let idx = 2;
const {
cooked,
cooked: { length }
} = JSON.parse(process.env.npm_config_argv);

while ((idx += 2) <= length) {
module.exports.npmConfigArgv[cooked[idx - 2]] = cooked[idx - 1];
}

process.env.VUE_APP_DEPLOY_PATH = module.exports.npmConfigArgv['--deploypath'];

在项目中就可以使用环境变量了;
你可以在 vue.config.js 文件中计算环境变量。它们仍然需要以 VUE_APP_ 前缀开头。
在 Vue-cli 官方文档中提到了这一点 在客户端侧代码中使用环境变量

1
2
3
4
5
6
7
8
9
# vue.config.js
module.exports = {
+ publicPath: isPro ? process.env.VUE_APP_DEPLOY_PATH : "/",
devServer: {

# router.js
const router = new VueRouter({
mode: "hash",
+ base: isPro ? process.env.VUE_APP_DEPLOY_PATH : "/",

参考文档