次のような結果になるように webpack でグローバル変数を定義することは可能ですか?
var myvar = {};
私が見たすべての例は、外部ファイルを使用していましたrequire("imports?$=jquery!./file.js")
次のような結果になるように webpack でグローバル変数を定義することは可能ですか?
var myvar = {};
私が見たすべての例は、外部ファイルを使用していましたrequire("imports?$=jquery!./file.js")
グローバルにアプローチするには、いくつかの方法があります。
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()
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 に関する私の回答を参照してください。
グローバルに文字列値で 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");
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
(サーバー側プロジェクトの場合) 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 では機能しないため)。
私はまったく同じ質問をしようとしていました。もう少し検索して webpack のドキュメントの一部を解読した後、必要なのはファイル内のoutput.library
andだと思います。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
と、他のスクリプトのどこからでもアクセスできます。
define を使用できますwindow.myvar = {}
。使いたいときは、のように使えますwindow.myvar = 1