ホームページ > 記事 > ウェブフロントエンド > Webpackによるサードパーティライブラリの導入方法と注意点（コード例）

Webpackによるサードパーティライブラリの導入方法と注意点（コード例）

不言転載: 2019-01-15 11:20:162661ブラウズ

この記事の内容は、webpack にサードパーティのライブラリを導入する方法と注意点 (コード例) についてです。必要な方は参考にしていただければ幸いです。

通常の状況では、npm 管理リポジトリでは見つからないサードパーティライブラリが使用されていることを心配する必要はありません。

jquery などの特定のライブラリが必要な場合は、npm install jquery スクリプトコマンドを直接実行して、このプロジェクトに必要な依存関係をインストールできます。

次に、jquery を使用してモジュールファイルにインストールします。 , Import $ from 'jquery' または var $ = require('jquery') を渡して導入します。

これは、Webpack で構築されたプロジェクトにサードパーティライブラリを導入する一般的な方法です。

注: サンプルコードをよりわかりやすく説明するために、この例は、nodemon の記事に基づいています。

ただし、シナリオによっては、webpack によって構築されたプロジェクトにさまざまな要件があります。

プロジェクトのサイズが十分に小さい (cdn)

# # webapck の処理方法については、webapck - Minimizing the Build Output の記事を参照してください。

CDN などの非 Webapck 処理方法を使用します。

html-webpack-plugin を使用する場合、操作も非常に簡単です。特定の CDN (ブート CDN など) 上のサードパーティライブラリ (jquery など) をテンプレートファイルに直接導入します。 template/index.html の参照コードは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>third party</title>
</head>
<body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

次に、

module.js で jqueryを使用します。参照コードは次のとおりです。 ##<pre class="brush:php;toolbar:false">require('./module.css'); module.exports = function() { $(document.body).append('<h1>hello webpack</h1>') }</pre>最後に、npm run test を実行します。ビルドが完了すると、背景に赤いページ効果とともに hello webpack という文字がブラウザに表示されます。

グローバル環境でサードパーティライブラリ (provide-plugin または imports-loader) を使用する

サードパーティライブラリを毎回使用しないようにするには、次のことが必要です。 import または require( ) を使用するとそれらが参照され、グローバル変数として定義できます。

webpack の ProvidePlugin の組み込みプラグインは、この問題を解決できます。詳しくはProvidePluginの紹介をご覧ください。

cdn によって参照される jquery との競合を避けるために、ここでは lodash が使用されます。

まず、lodash の依存関係をインストールします。コマンドは次のとおりです。

yarn add lodash --dev

次に、webpack.config.js に次のコードを追加します。

new webpack.ProvidePlugin({
        _: 'lodash'
}),

次に、モジュールに.js 次のコードを追加します:

...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
$(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
...

最後に、npm run test script コマンドを実行します。ビルドが完了したら、ブラウザページに 1、2、3、4、5、6、~ を追加できます。。

lodash の特定のツール関数 (_.concat、

など) をグローバルに使用できるように指定したい場合は、webapck.config.js を次のように変更します。コードは次のようになります。

...
new webpack.ProvidePlugin({
        // _: 'lodash',
        _concat: ['lodash', 'concat']
}),
...

次に、module.js を変更します。コードは次のとおりです:

...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
...

プラグインを使用したくない場合は、import-loader の使用を検討することもできます。、同じ目的を達成することもできます。

不必要な干渉を避けるために、アンダースコアを使用してデモを行うことができます。

最初に、imports-loader の依存関係をインストールします。コマンドは次のとおりです。

yarn add imports-loader --dev

次に、アンダースコアの依存関係をインストールします。コマンドは次のとおりです。

yarn add underscore

2 番目に、 webapck.config.js に次のコードを追加します。

...
module: {
        rules: [
                {
                        test: require.resolve('underscore'),
                        use: 'imports-loader?_=underscore'
                },
                ...
        ]
},
...

注: アンダースコアと lodash はどちらもシングルトンモデルを使用して開発されており、区別するために、インスタンス化されたコンストラクターの名前はどちらも _ です。変更する必要があります。 imports-loader でこのロゴのエイリアスを設定するのは少し難しいですが、provide-plugin ではこの問題がなく、パーソナライズされたエイリアスを設定できます。

webpack.config.js を変更します。コードは次のとおりです。

new webpack.ProvidePlugin({
        // _: 'lodash',
        // _concat: ['lodash', 'concat'],
        __: 'lodash'
}),

__ として定義された lodash と underscore_ を区別できます。

次に、module.js を変更します。コードは次のとおりです。

...
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
// $(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + __.concat(arr, '~') + '</h1');
...

最後に、すべてのファイルを保存すると、ブラウザで同様の結果が表示されます (保存後、nodemon が自動的に起動します)ブラウザ）。

cdn と外部機能

以前、外部機能に関するいくつかの問題に遭遇しました。多くの人がその用途を理解していないため、なぜ詳しく説明する必要があるのでしょうか。。

シーンの再現:

以前、jquery を使用したプロジェクトがありました。このライブラリは比較的古典的なため、アプリケーションのさまざまなモジュールで頻繁に参照されます。使用方法は次のとおりです。

import $ from 'jquery'

または

var $ = require('jquery')

その結果、ビルド完了後のファイルは比較的大きくなります。次に、上で説明したように、CDN の使用を検討してください。この方法では、インポートまたは必要な参照を削除し、インストールされている jquery の依存関係を削除する必要があります。ただし、プロジェクトの構造が比較的乱雑であり、モジュールが多いため、変更が少ない、または見逃されるという問題が発生します。アプリケーションエラー。それについて私たちは何ができるでしょうか？

jquery の依存関係を削除しないと cdn を使用する意味がなくなるという意見もあります。外部を使用すると、この問題を解決できます。

次のコードを module.js ファイルに追加できます:

...
var $ = require('jquery')
...

次に、ファイルを保存すると、ビルド出力に次のエラーが表示されることがわかります:

ERROR in ./module.js
Module not found: Error: Can't resolve 'jquery' in 'E:\workspace\me\webpack-play\demo\example-1'
 @ ./module.js 3:0-23
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./main.js

inモジュール module.js jquery を解析できません。

次に、次のコードを webpack.config.js に追加します。

externals: { 
    jquery: 'jQuery',
    jquery: '$'
},

ここで、jquery は require('jquery') 内の jquery を表し、jQuery と $ は jquery を表します。ライブラリ自体がインスタンス化識別子を提供します。。他のライブラリの CDN 化、jquery と同様の変更。

ただし、プロジェクトの最初に cdn を使用する場合は、jquery を使用するモジュールで var $ = require('jquery') または import $ from 'jquery' を使用しないでください。ただし、これによって問題が発生することはありません。エラーですが、何らかの理由で後で jquery 依存関係が導入される可能性がある場合は、 var $ = require('jquery') または import $ from 'jquery'; を使用する必要があります。

参考ソースコード

以上がWebpackによるサードパーティライブラリの導入方法と注意点（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jquery html npm webpack 构造函数 require 标识符 var JS

声明：

この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Webpack の原則の詳細な紹介 (例付き)次の記事：Webpack の原則の詳細な紹介 (例付き)

続きを見る