ホームページ > 記事 > ウェブフロントエンド > Webpack で外部を使用する方法
この記事では主にwebpackでのexternalの使い方をシンプルかつ分かりやすく紹介していますが、編集者がとても良いと思ったので、参考としてシェアさせていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
私たちは通常、以下の図のように、プロジェクトに取り組むときにサードパーティのライブラリをバンドルにパッケージ化します
サードパーティのライブラリをバンドルにパッケージ化したくない場合は、外部ライブラリがあります。エクスターナルの正式な使用方法は比較的簡単です
エクスターナル
公式 Web サイトのドキュメントでは非常に明確に説明されています。つまり、エクスターナル設定を使用した後でも、Webpack はアプリケーションの依存ライブラリを処理する必要がなく、引き続き CMD を使用できます。コード内の AMD またはウィンドウ/グローバル アクセス。
たったの 3 つのステップ -
1. HTML でサードパーティ ライブラリの cdn を導入します
2. webpack で外部を設定します
externals: { jquery: "jQuery", }
それでは、 jquery プラグインを自由に使用でき、バンドルにパッケージ化されないことを保証します。外部はどうやってやるのでしょうか?バンドルのソースコードを通して原理を分析してみましょう。
ここでの /* 0 */ と __webpack_require__ はそれぞれ、パッケージ化前の js に対応するモジュール関数を参照しているため、ここでは詳細には触れません。ここでは module.exports = jQuery となっていることがわかります。これは、外部のキーが require を参照し、値がそれを参照していることを意味します。つまり、「require のパラメータが jquery の場合、jQuery グローバル変数を使用してそれを参照します。」 「。」最も単純な外部構成方法は、デフォルトのグローバル モードです。これは、ウィンドウ上にグローバル変数をハングし、この変数を直接使用することです。具体的なプロセスは次のようになります。ソースコードで require('jquery') を使用した後、jquery を外部に直接追加して、パッケージ化された train.js を取得できます。ただし、この trainjs を導入する前に、まず jquery ライブラリを導入する必要があります。 . ファイルでは、このライブラリ ファイルはグローバル変数 jQuery を作成します。そして、trunkjs の外部の jquery はグローバル モードなので、実際、trunkjs が jquery を導入すると、グローバル変数、つまり module.export = から参照されます。 jQuery
もちろん、この外部メソッドを介しているため、実際には導入することなく直接グローバル変数を使用できます。
const $ = require("jquery"); $("#content").html("<h1>hello world</h1>");
先ほど述べたグローバル モードに気づいた方は、はい、もうお分かりかと思いますが、さまざまな出力方法を自由に使用できます。パッケージ化されたファイルをnode環境で実行したい場合はcommonjsの仕様を使用する必要があるため、このように記述する必要があります。
jQuery("#content").html("<h1>hello world</h1>");
梱包後はこんな感じになります。
それから、私のプロジェクトでもlodashを使用しており、それをバンドルから削除したいと思っています。以前の私のコードは、npmパッケージを引用して次のようになっていました
今、私たちの外部構成は次のとおりです。以下のように
externals: { jquery: "commonjs2 jQuery", }
このconstを削除する必要があります。削除しないと、lodashが定義されていないというエラーが報告されます。なぜそうなるのでしょうか? lodash の出力はグローバル形式なので、ここでヒントを与えておきます。出力形式を統一して、libraryTarget フィールドを追加しましょう
これは何に使用されますか?
これは出力ファイルのモジュール仕様です。上で構成した commonjs jquery がノードで実行されていると考えてください。つまり、最も頻繁に使用するモジュール ソリューションは commonjs2 と umd であり、前者はノード環境用であるということを覚えておいてください。 、後者はブラウザ環境です。合計で次の仕様があります:
"var" - 変数を設定してエクスポート: var Library = xxx (デフォルト)"this" - thisのプロパティを設定してエクスポート: this["Library"] = xxx" commonjs" - エクスポートのプロパティを設定してエクスポートします:exports["Library"] = xxx
"commonjs2" - module.exports を設定してエクスポートします: module.exports = xxx"amd" - AMD にエクスポートします (オプションの名前 - setライブラリ オプションによる名前)
"umd" - AMD、CommonJS2、またはルートのプロパティとしてエクスポート然后报这个错误,也就是说我们的模块没有正确的输出,回到我们的externals,它更多的是指定当你引用一个包的时候,这个包(lodash)应该遵循哪种模块化方式(common,root,amd等等)引入,这意思就是说,打包的时候不需要关心他到底怎么输出。
externals: { jquery: "jQuery", lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', root: '_' } },
ok,记得要将之前的覆盖掉,替换成下面的require,因为在externals中我们规范的commmonjs规范为lodash
也就是说,这就是我们最初的代码,即没有用过externals时候的代码,看,也就是说我们只需要配置externals和libraryTarget就可以,其他的业务逻辑代码不需要改变。包括我们的项目中还用了echarts,这个通通不用改变!!!!!
也就是说最终的代码是externals配合libraryTarget一起使用,如果去掉umd的话,会报这个错误
相应的源码是这样子
就是说我不知道通过那种方式输出,所以我应该告诉webpack,我通过umd方式输出,即将你的 lodash 暴露为所有的模块定义下都可运行的方式。它将在 CommonJS, AMD 环境下运行,或将模块导出到 global 下的变量.加上umd的源码如下
看到了吧,我通过require('lodash')引入模块,输出走的是commonjs规范,贴下最终的配置
entry: { main: './src/index.js' }, externals: { jquery: "jQuery", lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', root: '_' } }, output: { filename: '[name].[chunkhash].js', path: path.resolve(__dirname,'dist'), libraryTarget: 'umd' },
相关推荐:
以上がWebpack で外部を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。