Shulou(Shulou.com)06/03 Report--

This article mainly shows you "Node project how to configure the environment and make it support expandable", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "Node project how to configure the environment and let it support expandable" this article.

Due to the lack of Node project development does not involve the switching of environment variables, but often do front-end project development will always encounter, for example, projects in Vue can be configured .env.xxx.xxx and require the configuration of environment variables to start with VUE_APP_, Why? Let's explore how the environment variables of the Vue project are loaded and parsed, and then migrate to the Node project.

Explore the loading of environment configuration in Vue:

Let's take a look at Vue CLI's description of schemas and environment variables, and we see a passage that says: for details of the rules for parsing environment files, refer to dotenv. We also use dotenv-expand to implement variable extensions (supported by Vue CLI 3.5 +). Let's first use Vue Cli to create a Vue project.

Explore the first step:

The @ vue/cli-service package is used in package.json by executing scripts commands.

Explore step two:

The @ vue/cli-service package does install the two dependent packages prompted by the official website, and the key class Service is found in the vue-cli-service.js file in the bin directory.

Explore step 3:

In Service, we found the key function to load the environment configuration, in which the two path refer to .env.mode and .env.mode.local, that is, our environment variable file can be supported with or without .local.

Think about the role of load twice?

Explore step 3:

What's with the specified prefix? We found the answer in the util directory: resolveClientEnv.js, which was eventually loaded into the global configuration by the DefinePlugin plug-in.

Think about the setting of BASE_URL?

Add environment configuration to Node projects with webpack

Prepare the webpack project environment

Prepare webpack.config.js

Add env-helper.js. Let's implement it together:

Must rely on the installation

Npm install dotenv--savenpm install dotenv-expand-- save

Parsing environment variable files

/ * resolve the environment variable file * @ param {*} mode * / const loadEnv = (mode) = > {const basePath = path.resolve (_ _ dirname, `.env ${mode? `. ${mode}`: ``} `); const localPath =` ${basePath} .local`; const load = (envPath) = > {try {const env = dotenv.config ({path: envPath, debug: process.env.DEBUG}); dotenvExpand (env) } catch (err) {if (err.toString () .indexOf ("ENOENT")

< 0) { console.error(err); } } }; load(localPath); load(basePath);}; 符合前缀的环境变量对象 将符合正则条件的和特殊的进行整合后返回，通过注入到DefinePlugin插件中。 /** * 获取符合前缀规则的环境变量对象 */const prefixRE = /^XXTX_APP_/;const resolveClientEnv = () =>

{const env = {}; Object.keys (process.env). ForEach ((key) = > {if (prefixRE.test (key) | | key = = "NODE_ENV") {env [key] = process.env [key];}}); return env;}

Upgrade webpack.config.js to demonstrate environment variable reading

Add demo plug-ins and NODE_ENV configuration

Const webpack = require ("webpack"); const {loadEnv, resolveClientEnv} = require (". / env-helper"); / / parse the environment configuration file / / configure NODE_ENV=developmentloadEnv (process.env.NODE_ENV) in scripts via cross-env; / / get the environment configuration object const env = resolveClientEnv (); const HelloWorldPlugin = require (". / hello-world") Module.exports = {mode: "development", plugins: [new webpack.DefinePlugin (env), new HelloWorldPlugin ({options: true}),],}

Using environment variables in our webpack plug-in

Class HelloWorldPlugin {apply (compiler) {compiler.hooks.done.tap ("HelloWorldPlugin", () = > {console.log ("HelloWorld!"); console.log ("[XXTX_APP_NAME] >", process.env.XXTX_APP_NAME); console.log ("[XXTX_APP_BASE_URL] >", process.env.XXTX_APP_BASE_URL);}} module.exports = HelloWorldPlugin

View the output result

These are all the contents of the article "how the Node project configures the environment and makes it support extensibility". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.