[解決済み] webpackでグローバル変数を定義する

質問

webpackでグローバル変数を定義して、このような結果を得ることは可能でしょうか？

var myvar = {};

私が見たすべての例は、外部ファイルである require("imports?$=jquery!./file.js")

どのように解決するのですか？

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

1. 変数をモジュールに入れる。

Webpackはモジュールを一度だけ評価するので、あなたのインスタンスはグローバルなまま、モジュールからモジュールへ変更を引き継ぎます。 そのため、もしあなたが globals.js を作成し、すべてのグローバルのオブジェクトをエクスポートすると、次のようになります。 import './globals' を作成し、これらのグローバルに対して読み書きを行います。あるモジュールにインポートして、関数からオブジェクトに変更を加え、別のモジュールにインポートして、関数でその変更を読み込むことができます。また、物事が起こる順序を覚えておいてください。Webpackはまずすべてのインポートを受け取り、それらを 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()

1. Webpackの ProvidePlugin

ここでは、WebpackのProvidePlugin（モジュールをすべてのモジュールで、実際に使用するモジュールのみ変数として利用できるようにする）を使用する方法を紹介します。を何度も打ちたくないときに便利です。 import Bar from 'foo' を何度も何度も繰り返す。あるいは、jQueryやlodashのようなパッケージをここでグローバルとして取り込むこともできます（ただし、Webpackの エクスターナル ).

ステップ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を使用している場合は、開発サーバーを再起動することを確認してください。

注意: linterにグローバルについて伝えるのを忘れないようにしてください。例えば、私の ESLintに対する回答はこちら .

1. Webpackの 定義プラグイン

グローバルに文字列値で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");

1. グローバルウィンドウオブジェクト（またはNodeのグローバル）を使用する

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

1. のようなパッケージを使用します。 ドットエンブ

(サーバーサイドのプロジェクトの場合) 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の 外観 これは、ビルドしたバンドルに含まれないモジュールを除外したい場合に使用します。Webpackはそのモジュールをグローバルに利用できるようにしますが、バンドルには入れません。これはjQueryのような大きなライブラリに便利です（ツリーが外部パッケージを揺らすので はWebpackでは動作しません。 を使用する場合、これらは別のスクリプトタグですでにページに読み込まれています（おそらくCDNから）。