웹팩으로 전역 변수 정의

웹팩으로 전역 변수 정의

웹팩을 사용하여 전역 변수를 정의하여 다음과 같은 결과를 얻을 수 있습니까?

var myvar = {};

가 본 이었습니다를 한 것들이었습니다.require("imports?$=jquery!./file.js")

글로벌에 접근하는 데는 여러 가지 방법이 있습니다.

---

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

웹팩은 모듈을 한 번만 평가하므로 인스턴스는 전역적인 상태를 유지하고 모듈 간에 변경 사항을 전달합니다.그래서 만약 당신이 무언가를 만든다면,globals.js 전역의 개체를 다할 수 .import './globals'그리고 이 글로벌에 읽기/쓰기를 합니다.한 모듈로 가져올 수 있고, 함수에서 개체를 변경할 수 있으며 다른 모듈로 가져올 수 있으며 함수에서 변경된 내용을 읽을 수 있습니다.또한 일이 일어나는 순서를 기억하세요.할 것입니다.entry.js 실행됩니다. 됩니다.entry.js 읽기 따라서 글로벌에 대한 읽기/쓰기가 중요합니다.모듈의 루트 범위에서 인가요, 아니면 나중에 호출되는 함수에서 인가요?

config.js

export default {
    FOO: 'bar'
}

somefile.js

import CONFIG from './config.js'
console.log(`FOO: ${CONFIG.FOO}`)

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

---

2. 웹팩의 제공 플러그인을 사용합니다.

다음은 웹팩의 ProvidPlugin(모든 모듈에서 모듈을 변수로 사용할 수 있게 하고 실제로 사용하는 모듈만 사용할 수 있게 함)을 사용하여 이를 수행하는 방법입니다. 때 유용합니다.import Bar from 'foo'몇 번이고또는 jQuery나 lodash와 같은 패키지를 글로벌 버전으로 가져올 수도 있습니다(Webpack의 Externals를 볼 수도 있지만).

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

utils.js

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

2단계. 모듈의 별칭을 지정하고 ProvidPlugin에 추가합니다.

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-server를 사용하는 경우에는 dev-server를 재시작해야 합니다.

참고: 불평하지 않도록 전세계에 대해 편지에 말하는 것을 잊지 마세요.예를 들어, ESLint에 대한 제 답변을 여기서 보세요.

---

3. 웹팩의 DefinePlugin을 사용합니다.

전역에 문자열 값이 있는 const를 사용하려면 이 플러그인을 웹팩 플러그인 목록에 추가하면 됩니다.

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 패키지는 로컬 구성 파일(key/credential이 있는 경우 .gitignore에 추가할 수 있음)을 가져다가 노드의 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
})

---

메모들

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

저는 바로 그 질문을 하려고 했습니다.조금 더 검색해보고 웹팩의 문서의 일부를 암호 해독해보니 당신이 원하는 것은output.library그리고.output.libraryTarget에서webpack.config.js파일.

예를 들어,

js/index.js:

var foo = 3;
var bar = true;

webpack.config.js

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

이제 생성된 를 링크하면www/js/index.js접근할 수 있는 HTML 스크립트 태그의 파일myLibrary.foo당신의 다른 스크립트 어디에서나 볼 수 있습니다.

플러그인 정의을 사용합니다.

DefinePlugin을 사용하면 컴파일 시 구성할 수 있는 전역 상수를 만들 수 있습니다.

new webpack.DefinePlugin(definitions)

예:

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

용도:

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

정의를 사용할 수 있습니다.window.myvar = {}. 사용하고 싶을 때는 이렇게 사용하시면 돼요.window.myvar = 1

DefinePlugin은 실제로는 아무것도 정의하지 않습니다.이것은 번들 코드에 존재하는 변수를 대체하는 것입니다.코드에 변수가 없으면 아무 소용이 없습니다.그래서 글로벌 변수를 만들지 않습니다.

전역 변수를 생성하려면 코드에 다음과 같이 입력합니다.

window.MyGlobal = MY_GLOBAL; 

대신 DefinePlugin을 사용합니다.MY_GLOBAL코드가 있습니다.

new webpack.DefinePlugin({
    'MY_GLOBAL': `'foo'`,
    // or
    'MY_GLOBAL': `Math.random()`,
}),

그러면 출력 JS는 다음과 같습니다.

window.MyGlobal = 'foo';
// or
window.MyGlobal = Math.random(); 

그렇지만MY_GLOBAL런타임에 실제로는 존재하지 않습니다. 정의되지 않았기 때문입니다.그래서 DefinePlugin이 오해의 소지가 있는 이름을 가지고 있습니다.

일부 오래된 프로젝트에서 번들 < 스크립트 > 태그 js 파일을 시도할 때 이 문제가 발생할 수 있습니다.웹팩을 사용하지 마십시오. jquery와 같은 50개 이상의 라이브러리에 가입한 후 모든 전역 변수를 파악하거나 중첩된 변수를 사용하는 경우에도 불가능할 수 있습니다.2개의 명령어에서 이 모든 문제를 삭제하는 대신 단순히 ugulify js를 사용하는 것이 좋습니다.

npm install uglify-js -g

uglifyjs --compress --mangle --output bundle.js -- js/jquery.js js/silly.js

저는 글로벌 변수를 가장 관련성이 높은 클래스의 정적 속성으로 설정하여 이 문제를 해결했습니다.ES5에서는 다음과 같이 나타납니다.

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

언급URL : https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack