webpack process.env.NODEを深く理解する。ENV設定

9380 ワード

webpack process.env.NODE ENV

nodeでは、グローバル変数processが表しているのは現在のnodeプロセスです。process.envはシステム環境に関する情報を含んでいます。でもprocess.envにはNODE_は存在しません。ENVというもの。NODE_ENVはユーザーがカスタマイズした変数で、webpackでは生産環境や開発環境を判断するための用途です。
processの基本情報を確認するために、ファイルの中にprocess.jsファイルを新規作成できます。中にコードを追加します。その後、このフォルダに入り、node process.jsを実行すると、コマンドラインに以下の情報を印刷することができます。


$ node process.js
process {
 title: 'node',
 version: 'v4.4.4',
 moduleLoadList: 
  [....],
 versions: 
  { http_parser: '2.5.2',
   node: '4.4.4',
   v8: '4.5.103.35',
   uv: '1.8.0',
   zlib: '1.2.8',
   ares: '1.10.1-DEV',
   icu: '56.1',
   modules: '46',
   openssl: '1.0.2h' },
 arch: 'x64',
 platform: 'darwin',
 release: 
  { name: 'node',
   lts: 'Argon',
   sourceUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4.tar.gz',
   headersUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4-headers.tar.gz' },
 argv: 
  [ '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
   '/Users/tugenhua/  demo/process.js' ],
 execArgv: [],
 env: 
  { TERM_PROGRAM: 'Apple_Terminal',
   SHELL: '/bin/zsh',
   TERM: 'xterm-256color',
   TMPDIR: '/var/folders/l7/zndlx1qs05v29pjhvkgpmhjm0000gn/T/',
   Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.7Ax4C1EWMx/Render',
   TERM_PROGRAM_VERSION: '404',
   TERM_SESSION_ID: '82E05668-442D-4180-ADA3-8CF64D85E5A9',
   USER: 'tugenhua',
   SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.MYOMheYcL3/Listeners',
   PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin',
   PWD: '/Users/tugenhua/  demo',
   LANG: 'zh_CN.UTF-8',
   XPC_FLAGS: '0x0',
   XPC_SERVICE_NAME: '0',
   SHLVL: '1',
   HOME: '/Users/tugenhua',
   LOGNAME: 'tugenhua',
   SECURITYSESSIONID: '186a8',
   OLDPWD: '/Users/tugenhua/    /sns_pc',
   ZSH: '/Users/tugenhua/.oh-my-zsh',
   PAGER: 'less',
   LESS: '-R',
   LC_CTYPE: 'zh_CN.UTF-8',
   LSCOLORS: 'Gxfxcxdxbxegedabagacad',
   NVM_DIR: '/Users/tugenhua/.nvm',
   NVM_NODEJS_ORG_MIRROR: 'https://nodejs.org/dist',
   NVM_IOJS_ORG_MIRROR: 'https://iojs.org/dist',
   NVM_RC_VERSION: '',
   MANPATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/share/man:/usr/local/share/man:/usr/share/man:/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.13.sdk/usr/share/man:/Applications/Xcode.app/Contents/Developer/usr/share/man:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/share/man',
   NVM_PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/lib/node',
   NVM_BIN: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin',
   _: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
   __CF_USER_TEXT_ENCODING: '0x1F5:0x19:0x34' },
 pid: 14034,
 features: 
  { debug: false,
   uv: true,
   ipv6: true,
   tls_npn: true,
   tls_sni: true,
   tls_ocsp: true,
   tls: true },
 _needImmediateCallback: false,
 config: {},
 nextTick: [Function: nextTick],
 _tickCallback: [Function: _tickCallback],
 _tickDomainCallback: [Function: _tickDomainCallback],
 stdout: [Getter],
 stderr: [Getter],
 stdin: [Getter],
 openStdin: [Function],
 exit: [Function],
 kill: [Function],
 mainModule: 
  Module {
   id: '.',
   exports: {},
   parent: null,
   filename: '/Users/tugenhua/  demo/process.js',
   loaded: false,
   children: [],
   paths: 
   [ '/Users/tugenhua/  demo/node_modules',
    '/Users/tugenhua/node_modules',
    '/Users/node_modules',
    '/node_modules' ] } }

このようにprocessはnodeのグローバル変数であり、processはenvという属性を持っていますが、NODE＿uはありません。ENVという属性です。
process.env属性はユーザー環境情報を含む対象となります。開発環境や正式環境を識別する根拠があります。環境変数はどのように配置しますか？
一.環境変数の設定方法：
直接cmd環境に配置すればいいです。環境変数を調べたり、環境変数を追加したり、環境変数を削除したりします。
1.1 windows環境構成は以下の通りである。


#node           NODE_ENV，         
set NODE_ENV 

#             
set NODE_ENV=production 

#        set    =%   %;     
set path=%path%;C:\web;C:\Tools 

#             
set NODE_ENV=

1.2 Linux配置（macシステム環境もこれに属する）


#node           NODE_ENV，        
echo $NODE_ENV

#            
export NODE_ENV=production

#       
export path=$path:/home/download:/usr/local/

#            
unset NODE_ENV

#               
env

環境変数を参照して、環境変数を追加し、環境変数を削除します。

すべての環境変数を表示します。下図のように。

注意：コマンドラインに環境変数を設定した後、例えばプロジェクトを設定した後、下記のように設定します。
export NODE_ENV=productionは、すべてのプロジェクトの下で正式な環境になります。コマンドnpm installを使って、依存パケットをダウンロードする時、package.jsonの中のdependenciesをダウンロードします。devDependenciesの中の依存カバンはダウンロードできません。
そこで上の命令でunset NODE_を使う必要があります。ENVは設定したばかりの環境変数を削除します。
二：DefinePluginの意味を理解する
公式サイトhttps://webpack.js.org/plugins/define-plugin/)
DefinePluginはグローバル変数を作成し、コンパイル時に設定することができますので、グローバル変数を設定して開発環境と正式環境を区別することができます。これがDefinePluginの基本機能です。
そこで、webpack.co nfig.jsにグローバル変数情報を設定するコードを追加できます。webpackをコンパイルすると、グローバルに変数を設定します。次のコード:


module.exports = {
 plugins: [
  //         
  new webpack.DefinePlugin({
   PRODUCTION: JSON.stringify(true),
   VERSION: JSON.stringify('5fa3b9'),
   BROWSER_SUPPORTS_HTML5: true,
   TWO: '1+1',
   'typeof window': JSON.stringify('object'),
   'process.env': {
    NODE_ENV: JSON.stringify(process.env.NODE_ENV)
   }
  })
 ]
}

package.jsonパッケージ構成は以下のコマンドです。


"scripts": {
 "dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
 "build": "webpack --progress --colors --devtool cheap-module-source-map",
 "build:dll": "webpack --config webpack.dll.config.js"
},

このように構成が完了したら、グローバル変数かどうかを検証するために、npm run devパッケージを実行した後、私達は私達のプロジェクトの中でjsファイルを入り口に入れて、プリントしてもいいです。例えば、下記のコード：


console.log('Running App version ' + VERSION); //    Running App version 5fa3b9
console.log(PRODUCTION); //    true
console.log(process.env); //    { NODE_ENV: undefined }

上記のような情報はprocess.env.NODE_を見ることができます。ENVがundefinedとして印刷されたのは、私たちがpackage.jsonファイルに設定されていないからです。次に私達はpackage.jsonにNODE_を加えます。ENV変数値、コードパッキングコマンドは以下のようになります。


"scripts": {
 "dev": "NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
 "build": "NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
 "build:dll": "webpack --config webpack.dll.config.js"
},

上のように梱包コマンドは、devパッケージコマンドに、前にNODE_を追加しました。ENV=developmentコマンドは、buildパッケージコマンドの前にNODE(u)を追加しました。ENV=productionですので、コードの確認を続けて次のようになりました。


console.log('Running App version ' + VERSION); //    Running App version 5fa3b9
console.log(PRODUCTION); //    true
console.log(process.env); //    { NODE_ENV: 'development' }

この時のプロcess.env.NODE_が見られます。ENVは価値がありますので、プロジェクトパッケージにおいて、開発環境と正式環境を区別するために、上記のように配置すればいいです。そしてwebpack.co.nfig.jsでprocess.env.NODE_を通過します。ENVこれは正式な環境と開発環境を区別すればいいです。
三：cross-envを理解する
1.何がcross-envですか？
これはクロスプラットフォームの設定を実行し、環境変数を使用するスクリプトです。
2.その役割は何ですか？
私達がNODE_を使う時ENV=productionで環境変数を設定する場合、多くのwindowsコマンドは渋滞や異常を示すか、windowsはNODE(u)をサポートしていません。ENV=developmentのこのような設定は、エラーとなります。だからcross-envが現れました。私たちはcross-envコマンドを使うことができます。プラットフォームの設置や環境変数の使用を心配する必要はありません。つまり、cross-envは環境変数を設定するscriptsを提供できます。これによりunix方式で環境変数を設定できますが、windowsでも対応できます。
このコマンドを使うには、まず私たちのプロジェクトでこのコマンドをインストールする必要があります。


npm install --save-dev cross-env

そして、package.jsonのscriptsコマンドは以下の通りです。


"scripts": {
 "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
 "build": "cross-env NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
 "build:dll": "webpack --config webpack.dll.config.js"
}

以上、webpack process.env.NODEを深く理解しました。ENV配置の詳細については、webpack process.env.NODE_ENV配置の資料は他の関連記事に注目してください。

C〓〓シナリオエンジンCS-Scriptの使用

マイクロクレジット・プログラムは、ユーザの転送機能を制限する例示的なコードを実現する。