# cross-env-demo

**Repository Path**: codeResp/cross-env-demo

## Basic Information

- **Project Name**: cross-env-demo
- **Description**: cross-env-demo 使用.
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-27
- **Last Updated**: 2022-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack - cross-env 使用

+ `webpack` 的执行环境是 `node.js`
+ 在 `node.js` 执行环境中,在所有模块里都可以访问到一个全局进程变量 `process`
+ 在 `process` 全局变量身上都一个对象叫 `env` ==> `process.env`
+ 由于 `JavaScript` 是非常动态的语言,我们可以随意在任意对象上任意的添加属性. 所以,很多前端脚手架配置文件里的 `process.env.NODE_ENV` 就是在 `node.js` 执行环境下的全局对象 `process.env` 上添加了一个很简单的字符串(`development production`).
+ `cross-env` 是一个第三方库,可以不在 `.js` 文件中,以命令的方式给`process.env`(特定对象上&配置文件之外),动态的添加各种属性.在 `package.json`中的 `scripts` 脚本配置
+ `cress-env` 是跨平台的.


```javascript
// 在 package.json 中
{
    "scripts:" : {
        "setFccc": "cross-env fccc=123"
        "setHaha" : "cross-env haha=zhnas"
    }
}
// 上述两句配置等价于在 js 模块中
    
process.env.fccc = '123'
process.env.haha = 'zhnas'

```

很多前端打包工具的的条件编译都是利用 `process.env.xxxx` 来进行的.

---

+ 知道了 `process.env` 是全局的,可以在任意的打包的配置 `js` 文件中访问.
+ 也知道了可以利用 `cross-env` 在 配置 `js` 文件以外修改 `process.env.xx` 的值.
+ 那我们只需要在配置的 `js` 文件中,在配置 js 文件中通过判断 `process.env.xxx` 的值,来进行指定的条件编译即可.


![cress-env](assets/cress-env.png)



----

## 一个简单的 DEMO.

> 通过 `process.env.locale` 的值,来动态的指定 `index.html` 的 `title` 属性值

```javascript
// package.json 安装依赖
"devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "cross-env": "^7.0.3",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.10.3"
  }
// package.json scripts 脚本配置
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "en":"cross-env locale=en webpack --config webpack.config.js",
    "zh":"cross-env locale=zh webpack --config webpack.config.js"
  },
```


```javascript
// webpack.config.js 配置代码
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')


// 根据指定的 process.env.locale 来动态的设定 index.html 的 title 模板值.
const getIndexTitleWithLocale = () => {

  switch (process.env.locale) {
    case "en":
      return "this is english site!"
    case "zh":
      return "这是中文网站!"
    default:
      return "你并未设置 process.env.locale 属性"
  }
}

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 动态指定模板 title,不能使用 template 属性
      // template: path.resolve(__dirname),
      title: getIndexTitleWithLocale()
    }),
    new CleanWebpackPlugin()
  ]
}

```

效果:

![cross-env-demo](assets/cross-env-demo.gif)