web-dev-qa-db-ja.com

Webpack-非モジュールスクリプトをグローバルスコープにロードする方法|窓

だから、私はウィンドウスコープから実行する必要があるいくつかのベンダーファイルを持っています（それはウィンドウスコープの関数の束です）プラスベンダーバンドルにもバンドルしたいいくつかのポリフィルがあります。

だから私はこのようなものを試しました：

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'js/vendor.min.js',
    minChunks: Infinity,
})

entry: {
    'vendor' : ['./vendor.js', './vendor2.js', './polyfills.js']
}

これで、webpackビルドを実行すると、ベンダーバンドルが生成されますが、すべてwebpackJsonPラッパーにラップされているため、ウィンドウスコープで機能にアクセスできません。

ProvidePluginのようなものを使用することも検討しましたが、すべてがマッピングされるjQueryのような定義された名前がないため、まったく機能しませんでした。

これはwebpackでも可能ですか？

webpackwebpack-3
11
Mick Feller

スクリプトローダープラグインを使用：

スクリプト全体をグローバル名前空間に登録する場合は、 script-loader を使用する必要があります。これはモジュールの感覚を壊すのでお勧めしません;-)しかし、他に方法がない場合：

npm install --save-dev script-loader

Webpack docs

このローダーは、スクリプトタグにコードを追加するのと同じように、グローバルコンテキストでコードを評価します。このモードでは、すべての通常のライブラリが動作するはずです。 require、moduleなどは未定義です。

注：ファイルはバンドルに文字列として追加されます。 webpackでは最小化されないため、最小化されたバージョンを使用してください。また、このローダーによって追加されたライブラリに対する開発ツールのサポートもありません。

次に、entry.jsファイルでインポートできますinline：

import  "script-loader!./eluminate.js"

またはconfig：経由

module.exports = {
  module: {
    rules: [
      {
        test: /eluminate\.js$/,
        use: [ 'script-loader' ]
      }
    ]
  }
}

およびentry.js

import './eluminate.js';

私が言ったように、それはグローバルな名前空間を汚染します：

enter image description here

12
Legends