likes
comments
collection
share

NODE_ENV，一个老中医看了都说好的法子

作者站长头像
站长
· 阅读数 18

当你拖着沉重的步伐刚刚迈进办公室，还没来得及打杯水缓解一下昨天加班的疲惫和早上肉夹馍一般的地铁给你带来的疲惫，某人就来到了你的工位：

小明啊，我们项目好几个环境切来切去太复杂，你给一个方案解决下？

当小明想到不同环境之间那么多不同的不同的变量、参数。。。小明眼前一黑。。。

快打120！！！，小明晕过去了！！！，这小子，平时一看就营养不良，低血糖。。。

后来小明换了公司，有天早上小明刚一屁股坐到椅子上，"小明，我们项目好几个环境切来切去太复杂，你给一个方案解决下？" 小明微微一笑，“小事情，洒洒水的啦！我吃个山东煎饼先”,

这个转变都是因为这个兄弟 NODE_ENV，在webpack中它的用途是判断生产环境或开发环境

那什么是NODE_ENV呢？

在说NODE_ENV之前，我们先说说process。在node中，有一个 全局 的变量process表示当前的node进程

// 截图太多信息不好截，直接贴代码吧
console.log('process',process.env);

process {
    ALLUSERSPROFILE: 'C:\\ProgramData',
    APPDATA: 'C:\\Users\\const\\AppData\\Roaming',
    CHROME_CRASHPAD_PIPE_NAME: '\\\\.\\pipe\\LOCAL\\crashpad_24344_PEVSXQTAAKELRJOM',
    CommonProgramFiles: 'C:\\Program Files\\Common Files',
    'CommonProgramFiles(x86)': 'C:\\Program Files (x86)\\Common Files',
    CommonProgramW6432: 'C:\\Program Files\\Common Files',
    COMPUTERNAME: 'MYDELL',
    ComSpec: 'C:\\WINDOWS\\system32\\cmd.exe',
    DriverData: 'C:\\Windows\\System32\\Drivers\\DriverData',
    EFC_8116: '1',
    HOMEDRIVE: 'C:',
    HOMEPATH: '\\Users\\const',
    LOCALAPPDATA: 'C:\\Users\\const\\AppData\\Local',
    LOGONSERVER: '\\\\MYDELL',
    NUMBER_OF_PROCESSORS: '8',
    OneDrive: 'C:\\Users\\const\\OneDrive',
    OneDriveConsumer: 'C:\\Users\\const\\OneDrive',
    PATHEXT: '.COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC;.CPL',
    PROCESSOR_ARCHITECTURE: 'AMD64',
    PROCESSOR_IDENTIFIER: 'Intel64 Family 6 Model 140 Stepping 1, GenuineIntel',  PROCESSOR_LEVEL: '6',  PROCESSOR_REVISION: '8c01',
    ProgramData: 'C:\\ProgramData',
    ProgramFiles: 'C:\\Program Files',
    'ProgramFiles(x86)': 'C:\\Program Files (x86)',
    ProgramW6432: 'C:\\Program Files',
    PSModulePath: 'C:\\Users\\const\\Documents\\WindowsPowerShell\\Modules;C:\\Program Files\\WindowsPowerShell\\Modules;C:\\WINDOWS\\system32\\WindowsPowerShell\\v1.0\\Modules',
    PUBLIC: 'C:\\Users\\Public',
    SESSIONNAME: 'Console',
    SystemDrive: 'C:',
    SystemRoot: 'C:\\WINDOWS',
    TEMP: 'C:\\Users\\const\\AppData\\Local\\Temp',
    TMP: 'C:\\Users\\const\\AppData\\Local\\Temp',
    USERDOMAIN: 'MYDELL',
    USERDOMAIN_ROAMINGPROFILE: 'MYDELL',
    USERNAME: 'const',
    USERPROFILE: 'C:\\Users\\const',
    windir: 'C:\\WINDOWS',
    yarn: 'C:\\Users\\const\\AppData\\Local\\Yarn\\bin',
    ZES_ENABLE_SYSMAN: '1',
    TERM_PROGRAM: 'vscode',
    TERM_PROGRAM_VERSION: '1.77.3',
    LANG: 'zh_CN.UTF-8',
    COLORTERM: 'truecolor',
    GIT_ASKPASS: 'd:\\vscode\\Microsoft VS Code\\resources\\app\\extensions\\git\\dist\\askpass.sh',
    VSCODE_GIT_ASKPASS_NODE: 'D:\\vscode\\Microsoft VS Code\\Code.exe',
    VSCODE_GIT_ASKPASS_EXTRA_ARGS: '--ms-enable-electron-run-as-node',
    VSCODE_GIT_ASKPASS_MAIN: 'd:\\vscode\\Microsoft VS Code\\resources\\app\\extensions\\git\\dist\\askpass-main.js',
    VSCODE_GIT_IPC_HANDLE: '\\\\.\\pipe\\vscode-git-b7d15fb838-sock',
    VSCODE_INJECTION: '1'
  }

如此可知，process属性返回的是一个包含用户环境信息的对象。process有个env的对象，但是并没有NODE_ENV

NODE_ENV，一个老中医看了都说好的法子 这是Webpack官网的描述(www.webpackjs.com/guides/prod…)

之所以没有，是因为没有配置，配置了之后，就会给process.env.NODE_ENV赋值，js便能通过process.env.NODE_ENV获取信息（因为process是全局的嘛）

"scripts": {
    "dev": "NODE_ENV=development", // NODE_ENV=development 就是赋值
    "build": "NODE_ENV=production"
}

这种方式只是在 Shell 脚本中添加临时的变量，其他页面是读取不到的！！！

cross-env

注意：不同操作系统的写法是有差异的，为了解决这个差异问题，可以使用cross-env

使用很简单，在NODE_ENV前面加上cross-env即可。

    cross-env NODE_ENV=production

process.env.NODE_ENV默认只有两种状态即development和production，development指代本地开发即localhost环境（本地的开发），而production代表线上服务。

    if (process.env.NODE_ENV === 'development') {
        //开发环境 
    } else {
        //生产环境 
    }

配置环境

process.env.NODE_ENV默认只有两种状态即development和production，development指代本地开发即localhost环境（本地的开发），而production代表发布在任何服务上的服务（当然你也可以自定义其他环境）

那我们在开发的时候怎么配置其他环境呢？(这儿只说vue和react项目里面)

vue项目里面配置env
npm run serve 时会把process.env.NODE_ENV设置为development
npm run build 时会把process.env.NODE_ENV设置为production

这个时候我们只需要process.env.NODE_ENV设置不同的url就可以很简单的区分出本地和线上环境 至于其他环境的话

第一步：

在package.json 文件里面新增命令 stage、ide、pet NODE_ENV，一个老中医看了都说好的法子

第二步：

在项目根目录添加文件“.env.ide、.env.ide、.env.pet” NODE_ENV，一个老中医看了都说好的法子 其内容如下： NODE_ENV，一个老中医看了都说好的法子 NODE_ENV，一个老中医看了都说好的法子 NODE_ENV，一个老中医看了都说好的法子

第三步：

通过process.env.NODE_ENV或process.env.VUE_APP_BASE_URL取出值使用就行

拓展： --mode : 是定义 webpack 所需的 mode 详见：www.webpackjs.com/api/cli/

注意

  1. 位置

    .env文件必须在根目录创建

  2. 名字

    .env文件 需要声明运行的环境 如：.env.ide（对应的ide环境）,env.pet（对应的pet环境） .env文件如果就是全名的话，那就是全局默认配置文件，不论什么环境都会加载合并

  3. 内容

    自定义的属性名必须以 VUE_APP_ 开头，比如VUE_APP_BASE_URL``，VUE_APP_XXX NODE_ENV，一个老中医看了都说好的法子

    详见：cli.vuejs.org/zh/guide/mo…

  4. 命令

    package.json文件里面可以具体设置 启动/打包 具体加载哪个.env.XXX文件 NODE_ENV，一个老中医看了都说好的法子

  5. 合并规则

    多个.env文件都要加载的话，如果两个文件有相同一个项，后加载文件会覆盖第一个文件。

  6. 里面可以放很多你想放的东西

    NODE_ENV，一个老中医看了都说好的法子 NODE_ENV，一个老中医看了都说好的法子

所以 配置好一个，就加一个打包说明，免得自己搞忘记，也方便其他人看

react项目里面配置env

react的的脚手架关于env的官方介绍 create-react-app.dev/docs/adding…

总体来说和vue差不多，但是也有一些 差别

  1. 自定义变量必须以 REACT_APP 开头
  2. react默认支持这几个环境的
.env：默认。
.env.local：本地覆盖。除 test 之外的所有环境都加载此文件。
.env.development, .env.test, .env.production：设置特定环境。
.env.development.local, .env.test.local, .env.production.local：设置特定环境的本地覆盖。

如果你需要更多的话就只能借助于：dotenv

转载自:https://juejin.cn/post/7221711920512172087
评论
请登录