前端 - webpack如何打包script标签引入的代码

Question

比如我的库文件vue，vuex 这些都是通过cdn 使用script加载到html，那我在打包的时候 就不会去打包库文件，而是使用我的script的资源。那我源码里面就不能使用require('vue') 这种代码。这个应该如何解决

Answer 1

まず、パッケージ化するバンドル ファイルでサポートされるモジュール仕様を決定する必要があります。私は umd を好むので、パッケージ化するバンドル ファイルはすべて umd です。つまり、commjs、amd、およびグローバル モジュール形式をサポートします。幸いなことに、vue によってリリースされたパッケージも umd です。つまり、webpack によってパッケージ化されたバンドルと同じです。

第二に、umd はどのようにモジュールを参照するのでしょうか? requirejs などのモジュール エンジンを使用しない場合、モジュール ファイルは script タグを通じて直接インポートされます。たとえば、webpack によってパッケージ化された複数のバンドル ファイルを同時に導入すると、これらのファイル間で実際にはグローバル モードを通じて相互に参照し、オブジェクトがウィンドウ上にハングされ、2 番目のバンドル ファイルで直接使用されます。ウィンドウにハングしたこのオブジェクトはグローバル変数として使用できます。 vue は umd の後に続くと上で述べたので、2 つの script タグを通じて vue と独自のバンドル ファイルを導入すると、window.Vue を通じて vue を参照できます。

もう一度言いますが、バンドル内の script タグによって導入された vue をどのように参照すればよいでしょうか?上記のネチズンの外部を使用するだけです。このvueを参照するにはexternalsルールを構築する必要があります。externalsの使い方はwebpackの公式サイトを参照してください。公式サイトの説明があまりにも簡単なので、公式サイトの例をもとにブログを書きました。外観について詳しく説明していますので、興味があれば読んでください。あなたの場合、外部には次のものが含まれている必要があります:

リーリー

上記は Webpack 設定の一部です。ソース コードで次のように使用します。

リーリー

パッケージ化されたバンドル ファイルでは、グローバル モードでグローバル変数 Vue が割り当てられることがわかります。

Answer 2

vue vuex を抽出します

リーリー

プラグインでの書き込み:

リーリー

このように、require('vue') の有無に関係なく、vue、vuex などが別の 文件夹名/vue.js
とコンテンツに生成されます。この vue.js に含まれているものはあなたのものになります、他の webpack エントリ js ファイルはそれをパッケージ化しません

Answer 3

外部を使用する場合でも、require を使用します