npmからダウンロードしたモジュールを使用

Question

私はthis guide onを読んでいます。

多くの優れた技術的理由で、CommonJSモジュール（つまり、 はすべて）がブラウザでネイティブに使用できません。 JavaScriptを「バンドル」すると、これらのモジュールを というタグが付いたWebページに含めることができる.jsファイルにバンドルする必要があります。私は私がnpm install jqueryような何かを行うことができ、その後 <script src="node_modules/jquery/dist.jquery.js">

のように私のindex.htmlファイルノードモジュールを介して基準この、何かでこれが当てはまらない場合、または私が間違っていた印象の下に

でしたか？あなたが読んガイドで述べたように

Answer 1

はい。あなたは正しいです。 Jqueryは、commonjsモジュールではないグローバルモジュールです。 commonjsモジュールを使用する他のパッケージでは、import/export文を使用して、browserifyのようなバンドラを必要とします。ブラウザで使用するには、バンドルをバンドルする必要があります。

Answer 2

、それらの「bundlers」の例があるwebpack/browserify/systemjs /など。

これらは基本的にモジュールをロードする「モジュールローダー」と呼ばれるものですブラウザを使用してアプリケーションを実行します。

これらのモジュールローダーには設定ファイルがあります。

は、したがって、たとえば、あなたはあなたが以下のように見えるかもしれません webpack.config.jsている必要があります npm install webpackをインストールした後、 webpackの場合：

module.exports = { 
    entry: "./app/boot", 
    output: { 
     path: __dirname, 
     filename: "./dist/bundle.js" 
    }, 
    resolve: { 
     extensions: ['', '.js', '.ts'] 
    }, 
    module: { 
     loaders: [ 
      { test: /\.ts/, loader: ["ts-loader"], exclude: /node_modules/ }, 
     ], 
     preLoaders: [ 
     // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 
      { test: /\.js$/, loader: "source-map-loader", exclude: ['node_modules', 'ext-*', 'lib', 'tools'] } 
     ] 
    }, 
    debug: true, 
    devtool: 'source-map' 
}; 

Answer 3

jqueryライブラリがロードされると、バンドラー/ローダーまたはスクリプトタグによってインポートされます。

(function(global, factory) { 

"use strict"; 

if (typeof module === "object" && typeof module.exports === "object") { 

    module.exports = global.document ? 
     factory(global, true) : 
     function(w) { 
      if (!w.document) { 
       throw new Error("jQuery requires a window with a document"); 
      } 
      return factory(w); 
     }; 
} else { 
    factory(global); // export globally 
} 
})(typeof window !== "undefined" ? window : this, function(window, noGlobal) { /** jQuery definition **/ }