[javascript] 웹팩으로 전역 변수 정의

세계에 접근하는 방법에는 여러 가지가 있습니다.

1) 변수를 모듈에 넣습니다.

Webpack은 모듈을 한 번만 평가하므로 인스턴스는 전역으로 유지되며 모듈 간 변경 사항이 적용됩니다. 따라서 a globals.js와 같은 것을 만들고 모든 전역의 객체를 내 보내면 import './globals'이러한 전역에 읽고 쓸 수 있습니다 . 한 모듈로 가져 와서 함수에서 객체를 변경하고 다른 모듈로 가져 와서 함수의 변경 사항을 읽을 수 있습니다. 또한 일이 일어나는 순서를 기억하십시오. Webpack은 먼저 모든 가져 오기를 수행하여에서 시작하는 순서대로로드합니다 entry.js. 그런 다음 실행 entry.js됩니다. 따라서 전역에 대한 읽기 / 쓰기가 중요합니다. 모듈의 루트 범위 또는 나중에 호출되는 함수에 있습니까?

참고 : new매번 인스턴스를 사용하려면 ES6 클래스 를 사용하십시오 . 전통적으로 JS에서는 다음과 같이 클래스를 대문자로 사용합니다 (객체의 소문자가 아닌).
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()

2) 웹팩의 ProvidePlugin

다음은 Webpack의 ProvidePlugin을 사용하여 수행 할 수있는 방법입니다 (모든 모듈에서 모듈로 변수로 사용 가능하고 실제로 사용하는 모듈에서만 가능). 이것은 계속 타이핑을 계속하고 싶지 않을 때 유용 import Bar from 'foo'합니다. 또는 jQuery 또는 lodash와 같은 패키지를 전역으로 가져올 수 있습니다 (Webpack의 Externals를 볼 수도 있지만 ).

1 단계) 모듈을 만듭니다. 예를 들어, 전역 유틸리티 세트가 유용합니다.

utils.js

export function sayHello () {
  console.log('hello')
}

2 단계) 모듈 별명을 지정하고 ProvidePlugin에 추가하십시오.

webpack.config.js

var webpack = require("webpack");
var path = require("path");

// ...

module.exports = {

  // ...

  resolve: {
    extensions: ['', '.js'],
    alias: {
      'utils': path.resolve(__dirname, './utils')  // <-- When you build or restart dev-server, you'll get an error if the path to your utils.js file is incorrect.
    }
  },

  plugins: [

    // ...

    new webpack.ProvidePlugin({
      'utils': 'utils'
    })
  ]

}

이제 utils.sayHello()모든 js 파일을 호출 하면 작동합니다. Webpack과 함께 사용하는 경우 dev 서버를 다시 시작하십시오.

참고 : 린터에 글로벌 정보를 알려주는 것을 잊지 마십시오. 예를 들어 ESLint에 대한 내 대답은 여기를 참조하십시오 .

3) Webpack의 DefinePlugin 사용

전역에 문자열 값과 함께 const를 사용하려는 경우이 플러그인을 Webpack 플러그인 목록에 추가 할 수 있습니다.

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify("5fa3b9"),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: "1+1",
  "typeof window": JSON.stringify("object")
})

다음과 같이 사용하십시오.

console.log("Running App version " + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");

4) 전역 창 객체 (또는 노드의 전역)를 사용하십시오.

window.foo = 'bar'  // For SPA's, browser environment.
global.foo = 'bar'  // Webpack will automatically convert this to window if your project is targeted for web (default), read more here: https://webpack.js.org/configuration/node/

예를 들어 폴리 필에 일반적으로 사용되는 것을 볼 수 있습니다. window.Promise = Bluebird

5) dotenv 와 같은 패키지를 사용하십시오.

(서버 측 프로젝트의 경우) dotenv 패키지는 로컬 구성 파일 (키 / 자격 증명이있는 경우 .gitignore에 추가 할 수 있음)을 가져와 구성 변수를 Node의 process.env 객체에 추가합니다 .

// As early as possible in your application, require and configure dotenv.    
require('dotenv').config()

.env프로젝트의 루트 디렉토리에 파일을 작성하십시오 . 형식으로 새 줄에 환경 별 변수를 추가하십시오 NAME=VALUE. 예를 들면 다음과 같습니다.

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

그게 다야.

process.env이제 .env파일에 정의한 키와 값이 있습니다.

var db = require('db')
db.connect({
  host: process.env.DB_HOST,
  username: process.env.DB_USER,
  password: process.env.DB_PASS
})

노트:

Webpack의 Externals 와 관련 하여 빌드 된 번들에 일부 모듈이 포함되지 않도록하려면 사용하십시오. Webpack은 모듈을 전 세계적으로 사용할 수있게하지만 번들에 넣지 않습니다. 이것은 jQuery와 같은 큰 라이브러리에 유용합니다 (웹 패키지 에서는 트리 흔들리는 외부 패키지 가 작동하지 않기 때문에 ). 이들은 이미 별도의 스크립트 태그 (아마도 CDN에서)로 페이지에로드되어 있습니다.

답변

var foo = 3;
var bar = true;

module.exports = {
   ...
   entry: './js/index.js',
   output: {
      path: './www/js/',
      filename: 'index.js',
      library: 'myLibrary',
      libraryTarget: 'var'
   ...
}

new webpack.DefinePlugin(definitions)

plugins: [
  new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true)
  })
  //...
]

console.log(`Environment is in production: ${PRODUCTION}`);

var Foo = function(){...};
Foo.globalVar = {};