[NPM] Make npm scripts cross-environment friendly
npm Make environment cross scripts
2023-09-14 08:59:18 时间
Unfortunately not all shell commands work across various environments. Two main techniques to support cross-environment scripts is to either use cross-platform commands or to use normalized node packages. In this lesson, we will look at updating an existing set of npm scripts and make sure they work on Mac OS X, Linux, and Windows.
1. Use cross-env
npm i -D cross-env
"test": "cross-env BABEL_ENV=test mocha spec/ --require babel-register",
2. Use 'rimraf' instead of 'rm -rf'
npm i -D rimraf
"postcover": "rimraf .nyc_output",
3. Use 'opn-cli' instead of 'open'
npm i -D opn-cli
"cover:open": "opn coverage/index.html",
4. Windows need double qoutes, to make it works for all envs, we can use \"
"lint:css": "stylelint \"**/*.scss\" --syntax scss",
5. Windows : '%npm_package_version%',
Mac and Linux: '$npm_package_version'
npm i -D cross-var
"prebuild": "cross-var rimraf public/$npm_package_version",
Should be careful when we use '|' pipe and '>' output symbol, we should wrap the whole command in a \"\":
"build:css": "cross-var \"node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/$npm_package_version/index.min.css\"",
"scripts": { "start": "node index.js", "poststart": "npm run build && npm run server", "pretest": "npm run lint", "test": "cross-env BABEL_ENV=test mocha spec/ --require babel-register", "cover": "nyc npm t", "postcover": "rimraf .nyc_output", "cover:open": "opn coverage/index.html", "lint": "npm-run-all lint:**", "lint:js": "eslint --cache --fix ./", "lint:css": "stylelint \"**/*.scss\" --syntax scss", "lint:css:fix": "stylefmt -R src/", "watch": "npm-run-all --parallel watch:*", "watch:test": "npm t -- --watch", "watch:lint": "onchange \"src/**/*.js\" \"src/**/*.scss\" -- npm run lint", "build": "npm-run-all build:*", "prebuild": "cross-var rimraf public/$npm_package_version", "xbuild:html:mac": "pug --obj data.json src/index.pug --out public/$npm_package_version/", "xbuild:html:win": "pug --obj data.json src/index.pug --out public/%npm_package_version%/", "build:html": "cross-var pug --obj data.json src/index.pug --out public/$npm_package_version/", "xbuild:css:mac": "node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/$npm_package_version/index.min.css", "xbuild:css:win": "node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/%npm_package_version%/index.min.css", "build:css": "cross-var \"node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/$npm_package_version/index.min.css\"", "xbuild:js:mac": "mustache data.json src/index.mustache.js | uglifyjs > public/$npm_package_version/index.min.js", "xbuild:js:win": "mustache data.json src/index.mustache.js | uglifyjs > public/%npm_package_version%/index.min.js", "build:js": "cross-var \"mustache data.json src/index.mustache.js | uglifyjs > public/$npm_package_version/index.min.js\"", "server": "npm-run-all --parallel server:*", "server:create": "cross-var http-server public/$npm_package_version -p $npm_package_config_port", "server:launch": "cross-var opn http://localhost:$npm_package_config_port", "prepush": "npm run lint" },
相关文章
- vite+vue3+ts开发组件库,发布npm
- npm是如何执行scripts中命令的?
- 通过NPM生态系统中的依赖树揭开脆弱性传播及其演化的神秘面纱
- 【说站】解决vue项目在npm run build打包的时候报错
- Data Encryption 你还在用NPM依赖吗?有 Crypto 就够了!
- npm使用淘宝镜像
- npm link 原理以及如何更好地对编译后的包进行调试
- 三面面试官:运行 npm run xxx 的时候发生了什么?
- npm install 报错 error code ERR_SOCKET_TIMEOUT解决办法
- NodeJs和NPM的基本操作
- 技术文档丨 OpenSCA技术原理之npm依赖解析
- 如何发布一个 TypeScript 编写的 npm 包
- 学习Linux:Make教程(linux的make教程)
- Linux下NPM配置完美解决路径问题(linuxnpm路径)
- 工具使用Linux下的Make工具分享编程之旅(linux下的make)
- 编译学习如何在Linux系统中Make编译(linux系统中make)
- NPM在Linux上的安装步骤(npm安装linux)
- 深入探究Linux中的Make命令(linux中的make)