发现一个很好用的工具, 写了一个公司内部的加载器工具,其他人发现用不了;原来在package.json中的scripts中设置了NODE_ENV=production,在windows下不能这样设置环境变量的,cross-env就是屏蔽了在不同平台上这种问题的差异;附一个css-loader的package.json文件,css-loader中就用了cross-env这个工具:

{
  "name": "css-loader",
  "version": "3.2.1",
  "description": "css loader module for webpack",
  "license": "MIT",
  "repository": "webpack-contrib/css-loader",
  "author": "Tobias Koppers @sokra",
  "homepage": "https://github.com/webpack-contrib/css-loader",
  "bugs": "https://github.com/webpack-contrib/css-loader/issues",
  "main": "dist/cjs.js",
  "engines": {
    "node": ">= 8.9.0"
  },
  "scripts": {
    "start": "npm run build -- -w",
    "prebuild": "npm run clean",
    "build": "cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files",
    "validate:runtime": "es-check es5 \"dist/runtime/**/*.js\"",
    "postbuild": "npm run validate:runtime",
    "clean": "del-cli dist",
    "commitlint": "commitlint --from=master",
    "lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different",
    "lint:js": "eslint --cache src test",
    "lint": "npm-run-all -l -p \"lint:**\"",
    "prepare": "npm run build",
    "release": "standard-version",
    "security": "npm audit",
    "test:only": "cross-env NODE_ENV=test jest",
    "test:watch": "cross-env NODE_ENV=test jest --watch",
    "test:coverage": "cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage",
    "pretest": "npm run lint",
    "test": "cross-env NODE_ENV=test npm run test:coverage",
    "defaults": "webpack-defaults"
  },
  "files": [
    "dist/",
    "lib/",
    "index.js"
  ],
  "peerDependencies": {
    "webpack": "^4.0.0"
  },
  "dependencies": {
    "camelcase": "^5.3.1",
    "cssesc": "^3.0.0",
    "icss-utils": "^4.1.1",
    "loader-utils": "^1.2.3",
    "normalize-path": "^3.0.0",
    "postcss": "^7.0.17",
    "postcss-modules-extract-imports": "^2.0.0",
    "postcss-modules-local-by-default": "^3.0.2",
    "postcss-modules-scope": "^2.1.0",
    "postcss-modules-values": "^3.0.0",
    "postcss-value-parser": "^4.0.0",
    "schema-utils": "^2.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.0",
    "@babel/core": "^7.5.4",
    "@babel/preset-env": "^7.5.4",
    "@commitlint/cli": "^8.1.0",
    "@commitlint/config-conventional": "^8.1.0",
    "@webpack-contrib/defaults": "^5.0.2",
    "@webpack-contrib/eslint-config-webpack": "^3.0.0",
    "babel-jest": "^24.8.0",
    "commitlint-azure-pipelines-cli": "^1.0.2",
    "cross-env": "^5.2.0",
    "del": "^5.0.0",
    "del-cli": "^2.0.0",
    "es-check": "^5.0.0",
    "eslint": "^6.1.0",
    "eslint-config-prettier": "^6.0.0",
    "eslint-plugin-import": "^2.18.0",
    "file-loader": "^4.0.0",
    "husky": "^3.0.0",
    "jest": "^24.8.0",
    "jest-junit": "^7.0.0",
    "lint-staged": "^9.2.0",
    "memory-fs": "^0.4.1",
    "npm-run-all": "^4.1.5",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^1.18.2",
    "sass": "^1.22.5",
    "sass-loader": "^7.1.0",
    "standard-version": "^7.0.0",
    "strip-ansi": "^5.2.0",
    "webpack": "^4.35.0"
  },
  "keywords": [
    "webpack",
    "css",
    "loader",
    "url",
    "import"
  ]
}

可以看到命令:"cross-env NODE_ENV=production babel src -d dist --ignore 'src/*/.test.js' --copy-files"
我们知道npm scripts其实是创建了一个shell,在这个shell中设置了环境变量NODE_ENV, 那么在nodejs程序中,process.env.NODE_ENV == "production",这个工具的好处解决了跨平台的问题,详细使用参考https://www.npmjs.com/package/cross-env


lizeyuan
25 声望1 粉丝