Heim >Web-Frontend >js-Tutorial >Wie konfiguriere ich die Node-Projektumgebung zur Unterstützung der Skalierbarkeit?
Dieser Artikel stellt Ihnen die Konfigurationsumgebung vor, damit das Node-Projekt skalierbare Methoden unterstützt. Ich hoffe, dass es für alle hilfreich ist!
Da es nur wenige Node-Projektentwicklungen gibt, die keinen Wechsel von Umgebungsvariablen beinhalten, stoßen wir jedoch immer darauf, wenn wir Front-End-Projektentwicklungen durchführen. In Vue-Projekten können Sie beispielsweise .env.xxx.xxx konfigurieren erfordert die Konfiguration von Umgebungsvariablen. Es sollte mit VUE_APP_
beginnen. Warum? Lassen Sie uns gemeinsam untersuchen, wie die Umgebungsvariablen des Vue-Projekts geladen und analysiert werden, und dann werden wir sie in das Node-Projekt übertragen. [Empfohlenes Lernen: „nodejs TutorialVUE_APP_
开头,Why?,我们就一起来探索一下Vue项目的环境变量是怎么加载并解析的,我们再移植到Node项目中。【推荐学习:《nodejs 教程》】
先来看看Vue CLI关于模式和环境变量的说明,我们看到有这么一段话:想要了解解析环境文件规则的细节,请参考 dotenv。我们也使用 dotenv-expand 来实现变量扩展 (Vue CLI 3.5+ 支持)。我们先用Vue Cli来创建一个Vue项目。
探索第一步:
在package.json
中通过执行scripts
的命令都使用到了@vue/cli-service
包
探索第二步:
@vue/cli-service
包确实安装了官网提示的两个依赖包,并在bin
目录下的vue-cli-service.js
文件中找到了关键类Service
。
探索第三步:
在Service
中我们找到了加载环境配置的关键函数,其中的两个path
分别指:.env.mode
和.env.mode.local
,也就是我们的环境变量文件可以支持带.local
也可以不带。
思考load
两次的作用?
探索第三步:
指定的前缀是怎么回事?我们在util
目录下找到了答案:resolveClientEnv.js
,最终是由DefinePlugin
插件加载到了全局的配置中。
思考BASE_URL
的设置?
准备webpack.config.js
新增env-helper.js,我们一起来实现一下:
必备依赖装一下
npm install dotenv --save npm install dotenv-expand --save
解析环境变量文件
/** * 解析环境变量文件 * @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; };
升级webpack.config.js来演示环境变量读取
增加演示插件和NODE_ENV配置
const webpack = require("webpack"); const { loadEnv, resolveClientEnv } = require("./env-helper"); // 解析环境配置文件 // 通过cross-env 再scripts中配置NODE_ENV=development loadEnv(process.env.NODE_ENV); // 获取符合规则的环境配置对象 const env = resolveClientEnv(); const HelloWorldPlugin = require("./hello-world"); module.exports = { mode: "development", plugins: [ new webpack.DefinePlugin(env), new HelloWorldPlugin({ options: true }), ], };
在我们的webpack插件中使用环境变量
class HelloWorldPlugin { apply(compiler) { compiler.hooks.done.tap("HelloWorldPlugin", () => { console.log("Hello World!"); 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;
查看输出结果
我们可以将env-helper.js
移植到其他的Node
"]
in <code>package.json
aus. Die Befehle aller Skripte verwenden alle das Paket @vue/cli-service
🎜🎜🎜🎜Erkunden Sie den zweiten Schritt: strong Das Paket >🎜🎜@vue/cli-service
installiert die beiden von der offiziellen Website angeforderten Abhängigkeitspakete und den vue-cli-service im Verzeichnis <code>bin
Die Schlüsselklasse Service
wurde in der .js-Datei gefunden. 🎜🎜🎜🎜Erkunden Sie den dritten Schritt:🎜path
beziehen sich auf: .env.mode
bzw. .env .mode.local
, das heißt, unsere Umgebungsvariablendatei kann .local
unterstützen oder nicht. 🎜load
nach? 🎜util
: resolveClientEnv.js
, das schließlich vom Plug-in DefinePlugin
in die globale Konfiguration geladen wurde. 🎜BASE_URL
nach? 🎜🎜erfüllen die regulären Bedingungen nach der Integration Mit dem speziellen wird es zurückgegeben und in das Plug-in DefinePlugin
eingefügt. 🎜
rrreee🎜Aktualisieren Sie webpack.config.js, um das Lesen von Umgebungsvariablen zu demonstrieren🎜🎜Demonstrations-Plugin hinzufügen und NODE_ENV-Konfiguration🎜rrreee🎜Verwendung von Umgebungsvariablen in unserem Webpack-Plugin🎜rrreee🎜Siehe die Ausgabe🎜🎜🎜env-helper.js
nach In anderem Node
-Projekten kann nur die Montagekonfigurationsmethode geändert werden. 🎜Dieses Mal basiert der Code vollständig auf der CV-Methode. Haben Sie es gelernt?
Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmierunterricht! !
Das obige ist der detaillierte Inhalt vonWie konfiguriere ich die Node-Projektumgebung zur Unterstützung der Skalierbarkeit?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!