175

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

var myvar = {};

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

4

6 に答える 6

336

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

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

Webpack はモジュールを 1 回だけ評価するため、インスタンスはグローバルなままで、モジュールからモジュールへと変更を伝えます。したがって、のようなものを作成して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 のExternalsを参照することもできます)。

ステップ 1) モジュールを作成します。たとえば、ユーティリティのグローバル セットが便利です。

ユーティリティ.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-server を再起動してください。

注: グローバルについてリンターに伝えることを忘れないでください。たとえば、ESLint に関する私の回答を参照してください

  1. 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");
  1. グローバル ウィンドウ オブジェクト (またはノードのグローバル) を使用します。

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のようなパッケージを使用する

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

于 2016-11-04T06:47:15.443 に答える
50

私はまったく同じ質問をしようとしていました。もう少し検索して webpack のドキュメントの一部を解読した後、必要なのはファイル内のoutput.libraryandだと思います。output.libraryTargetwebpack.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と、他のスクリプトのどこからでもアクセスできます。

于 2016-08-26T12:39:59.850 に答える
18

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

于 2016-06-28T08:06:45.630 に答える