npm 包 envlocalify 使用教程

在项目开发中，经常需要读取配置文件中的变量。而这些变量可能有些是开发环境中需要用到的，有些则是在生产环境中用到的，需要将这些变量放在环境变量中进行管理。那么，如何在前端代码中读取环境变量呢？这就需要用到 npm 包 envlocalify。

环境配置

首先，在项目中安装 envlocalify：

npm install envlocalify --save-dev

然后，我们需要在代码中引入 envlocalify。由于 envlocalify 是一个 browserify 转换插件，因此我们在使用它之前需要先安装 browserify：

npm install browserify --save-dev

接下来，在 package.json 文件中，我们需要添加一个 scripts 字段，用来配置环境变量和 build 命令：

{
  "scripts": {
    "start": "envlocalify .env.development -- envify ./main.js | browserify -d -t babelify -t [envlocalify] | node_modules/.bin/watchify -o bundle.js",
    "build": "envify ./main.js | browserify -t babelify -t [envlocalify] | node_modules/.bin/uglifyjs -m -c > bundle.js"
  }
}

以上配置中：

• start 命令用来启动一个开发服务器，当源文件发生变化时会自动重新编译；
• build 命令用来打包生产环境的代码。

其中，.env.development 是我们针对开发环境所定义的变量。

配置文件格式

.env.development 文件中，我们需要定义一些环境变量。这个过程中，我们需要采用以下格式：

VAR_NAME=var_value

其中，VAR_NAME 是变量名，var_value 是变量值。例如：

API_URL=http://localhost:3000/api
DEBUG=true

在代码中读取变量

假设我们在代码中需要使用 API_URL 这个环境变量，我们可以这样引用：

// main.js
const api_url = process.env.API_URL

当编译后，process.env.API_URL 将被替换成我们在 .env.development 中定义的值。

示例代码

以上所有步骤中，代码示例可以参考下面：

.env.development 中定义变量：

API_URL=http://localhost:3000/api
DEBUG=true

main.js 中引用变量：

// main.js
const api_url = process.env.API_URL
const debug = process.env.DEBUG

console.log(api_url, debug) // 将输出 'http://localhost:3000/api true'

package.json 中配置环境变量和 build 命令：

{
  "scripts": {
    "start": "envlocalify .env.development -- envify ./main.js | browserify -d -t babelify -t [envlocalify] | node_modules/.bin/watchify -o bundle.js",
    "build": "envify ./main.js | browserify -t babelify -t [envlocalify] | node_modules/.bin/uglifyjs -m -c > bundle.js"
  }
}

结语

以上就是 envlocalify 的使用教程。它为前端开发者提供了一种便利的管理环境变量的方式。如果您还没有使用过它，可以尝试在自己的项目中使用一下，相信会对您的项目开发有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/envlocalify