回答:
グローバルにアプローチする方法はいくつかあります。
Webpackはモジュールを1回だけ評価するため、インスタンスはグローバルのままであり、モジュール間で変更が伝達されます。したがって、のようなものを作成しglobals.js
、すべてのグローバルのオブジェクトをエクスポートするimport './globals'
と、これらのグローバルに対して読み取り/書き込みを行うことができます。1つのモジュールにインポートして、関数からオブジェクトに変更を加え、別のモジュールにインポートして、それらの変更を関数で読み取ることができます。物事が起こる順序も覚えておいてください。Webpackは最初にすべてのインポートを取得し、から順にロードしますentry.js
。その後、実行されentry.js
ます。したがって、グローバルへの読み取り/書き込みを行う場所が重要です。それはモジュールのルートスコープからですか、それとも後で呼び出される関数内ですか?
注:インスタンスをnew
毎回使用する場合は、ES6クラスを使用します。伝統的にJSでは、オブジェクトの小文字ではなくクラスを大文字にします
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()
ここでは、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'
})
]
}
ここで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に追加できます)を取得し、構成変数をノードの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はモジュールをグローバルに利用可能にしますが、バンドルに含めません。これは、jQueryのような大きなライブラリ(Webpackではツリーの揺れの外部パッケージが機能しないため)に便利です。これらは、(おそらくCDNから)別のスクリプトタグでページにロードされています。
externals
グローバル変数を作成する必要がある場合は、代わりに使用してください。例:externals: { 'webpackVariables': `{ serverUrl: '${ env.server }', cordovaBuild: '${ env.cordova }', }`, },
次に、次のように使用しますconst webpackVariables = require('webpackVariables');
declare const isProduction: bool;
。参考として、typescriptlang.org
私も同じ質問をしようとしていました。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
と、他のスクリプトのどこからでもアクセスできるようになります。
export { foo }
していると思いますindex.js
か?
DefinePluginを使用します。
DefinePluginを使用すると、コンパイル時に構成できるグローバル定数を作成できます。
new webpack.DefinePlugin(definitions)
plugins: [
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true)
})
//...
]
console.log(`Environment is in production: ${PRODUCTION}`);
defineを使用できますwindow.myvar = {}
。使いたい時はwindow.myvar = 1
var window.CKEDITOR_BASEPATH = {};
エラーは「Unexpected Token」の後に生成されますwindow.
var
キーワードを付ける必要があります。 window.CKEDITOR_BASEPATH = {};
utils
ますが、ターゲットファイルに自分の名前空間への参照を含めていなかったため、これは最初は機能しませんでした。ソースウィンドウと私はなぜutils
定義されなかったのかと戸惑い続けました。最後に、名前空間が少なくとも1回参照されている場合にのみ、webpackが(かなりスマートに)モジュールを含むことを発見しました。したがって、ターゲットファイルのユーティリティ関数の1つをで序文にするとutils
、モジュールが含まれていました。