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 优化资源方法技巧

webpack性能优化

webpack3之loader解析

以上がWebpack で外部を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。