web-dev-qa-db-ja.com

webpackでグローバル変数を定義する

このような結果を得るためにwebpackでグローバル変数を定義することは可能ですか？

var myvar = {};

私が見た例はすべて外部ファイルrequire("imports?$=jquery!./file.js")を使っていた

javascriptwebpackwebpack-2webpack-3
106
Teneff

グローバルにアプローチする方法はいくつかあります。

1）変数をモジュールに入れてください。

Webpackはモジュールを一度だけ評価するので、あなたのインスタンスはグローバルなままで、モジュールからモジュールへと変更を伝えます。 globals.jsのようなものを作成して、自分のすべてのグローバルのオブジェクトをエクスポートすると、import './globals'を作成してこれらのグローバルに読み書きできます。あるモジュールにインポートしたり、関数からオブジェクトに変更を加えたり、別のモジュールにインポートしたりして関数内でそれらの変更を読み取ることができます。物事が起こる順序も覚えておいてください。 Webpackは最初にすべてのインポートを取り、あなたのentry.jsから順にそれらをロードします。それからentry.jsを実行します。だからあなたがグローバルに読み書きする場所は重要です。それはモジュールのルートスコープからですか、それとも後で呼び出される関数からですか。

注：インスタンスを毎回newにしたい場合は、 ES6クラス を使用してください。従来のJSでは、次のように（オブジェクトの小文字ではなく）クラスを大文字にします。
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()

2）Webpackの 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'
    })
  ]  

}

どのjsファイルでもutils.sayHello()を呼び出すだけで動作します。 Webpackでそれを使用している場合は、必ずdev-serverを再起動してください。

注意：リンターにグローバルについて話すことを忘れないでください、それで文句を言うことはありません。例えば、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の プロセスに追加します。 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のような大きなライブラリには便利です（外部パッケージのツリーシェイク はWebpack では動きません）ので、これらはすでに別々のページにロードされています。スクリプトタグ（おそらくCDNから）。

203
prograhammer

私はまさに同じ質問をしていました。もう少し検索してwebpackのドキュメントの一部を解読した後、私が欲しいのは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にアクセスできるようになります。

35
OriolBG

DefinePlugin を使用してください。

DefinePluginを使用すると、コンパイル時に構成できるグローバル定数を作成できます。

new webpack.DefinePlugin(definitions)

例：

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

使用法：

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

Define window.myvar = {}を使うことができます。使いたいときは、window.myvar = 1のように使えます。

10
Anh Nguyen

この問題を解決するために、グローバル変数を最も関連のあるクラスの静的プロパティとして設定しました。 ES5では、このようになります。

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