[訳]JSモジュール化の歴史概要

5152 ワード
modularity common js javascript
JavaScriptにとって、モジュール化は相対的に現代的な概念であり、この文章はJavaScriptの世界で急速にモジュール化された歴史プロセスを紹介します.
Scriptラベルとクローズド
以前の年間では、JavaScriptは直接HTMLのタグに いています. は したファイルに れて、それらも つのグローバルスコープを しています.
どのJSファイルの でも された は、 なwindowオブジェクトに され、 ライブラリ の を に きすることがあります.
ウェブアプリケーションがますます になるにつれて、グローバルスコープを するという の が れ め、IIIIF( に を び す)が され、 く われている.IIIIFとは、セグメントコードを つの に んで、すぐにこの を します.JavaScriptでは、 ごとにスコープがありますので、 で されている はこの だけで られます. が しても、 はグローバルスコープに されません.
いくつかのIIIIFの き を てみます.IIIIFのスコープごとに しています.その で の き はよく られます.
(function() {
  console.log('IIFE using parenthesis')
})()

~function() {
  console.log('IIFE using a bitwise operator')
}()

void function() {
  console.log('IIFE using the void operator')
}()
IIIFを すると、あるライブラリがグローバル を したい 、windowにオブジェクトを として びつけることができ、これによりグローバルスコープを することが される. のコードを てください.mathlibツールを るなら、sum があります.このツールに のモジュールがあれば、 のファイルを することもできます. ファイルはIIIFEで、window.mathlibオブジェクトに を すればいいです.
(function() {
  window.mathlib = window.mathlib || {}
  window.mathlib.sum = sum

  function sum(...values) {
    return values.reduce((a, b) => a + b, 0)
  }
})()

mathlib.sum(1, 2, 3)
//
IIIIIFEという は、モジュールを のファイルに いて、グローバルスコープを しないように によってモジュール の といえる.
もちろんIIIIFにも があります. なツリー はなく、 がJSファイルのロード を するしかないです.
RequireJS、AnglarJSと
RequireJSとAnglarJSの は、 が であるか、すなわちどのモジュールを うべきかを えてくれました.
の はまずRequireJSのdefine で しないmathlib/sum.jsモジュールを します.
define(function() {
  return sum

  function sum(...values) {
    return values.reduce((a, b) => a + b, 0)
  }
})
その 、すべてのサブモジュールを するための モジュールmathlib.jsを することができる. たちの ではmathlib/sumのサブモジュールしかありませんが、mathlibのフォルダに に できます. にmathlibモジュールの を し、イメージ に に え、mathlibモジュールオブジェクトに る.
define(['mathlib/sum'], function(sum) {
  return { sum }
})
はい、mathlibライブラリを しました. はrequireで して できます.
require(['mathlib'], function(mathlib) {
  mathlib.sum(1, 2, 3)
  //
RequireJSは で ツリーを し、 が の を にせず、 なところでロードするモジュールを するだけで できます.
この な の き は モジュール の を にし、 にモジュール の を している.
しかし、RequireJSは がないわけではない.その パターンは ローディングモジュールの に しているが、 において、 のモジュールを にローディングすることによって き こされるネットワーク の すぎるなどの を している. が すぎると、 も い とフィードバックの のイメージリストに します. に、APIも ではないので、 のあるモジュールを するには、さまざまな き があります.
AnglarJSの システムも の に している. の によってモジュールを して、 にその を かなくてもいいですが、コード ツールには ではないです.
AnglarJS v 1の に、 のコードを することができます.
module.factory('calculator', function(mathlib) { 
  // … 
})
なバンド のコードに :
module.factory('calculator', ['mathlib', function(mathlib) { 
  // … 
}])
ガチョウは、エンジニアの でこのような を し、この を しましたが、それ の はあまり くないので、ほとんどの は で きした を しています.
Node.jsとCommon JS
Common JSモジュールシステムはNode.jsの の くの の つで、CJSとも われています.Node.jsによって ファイルシステムにアクセスできます.CommunJS がより いのは なモジュールローディング です.Common JSでは、 ファイルはモジュールであり、 の を っています. するローディングは require を して、この はモジュールの の で び すことができる.
const mathlib = require('./mathlib')
RequireJSとAnglarJSと に、Common JS もファイルパスに しています.しかし、それらの の いは、CommonJSが に と を てています.require はJS のようにモジュールのどこでも えます.
RequireJSとAnglarJSでは、 に されたモジュールが いかもしれませんが、CommunJSではファイルとモジュールが1つずつ しています. に、RequireJSの くのモジュール は、AnglarJSのfactory、service、providerとともに きくなっています.これに して、CommonJSはモジュールローディング が つしかなく、 つのJSファイルは つのモジュールであり、ローディング はrequireだけであり、 モジュールは すべき をmodule.exportsに り てるだけである.これらの は、Common JSモジュールのシステムをよりシンプルにし、 いやすいようにします.
ついに、Browserifyは として、CommunJSのNode.jsとブラウザの の を しました. くのモジュールをブラウザで できるファイルにパッケージできます.npm の は、CommunJSのキラーとしての であり、 にモジュールローディング における が されている.
かに、npmは にCommonJSモジュールとJavaScriptバッグにサービスしています. なモジュール と のため、Node.jsとwebブラウザのカバンが くnpmに れて、npmも で の になります.
ES 6、import、Babel、 びWebpack
ES 6は2015 に され、それまではBabelがES 6をES 5に する を っており、 たな が れています.ES 6 にはオリジナルのモジュール システムが まれており、 にECMAScript Modules(ESM)と ばれています.
ESMはCommon JSと たちの を けて、 な のAPIとPromiseに づく なローディングAPIを しています.
import mathlib from './mathlib'
import('./mathlib').then(mathlib => {
  // …
})
ESMでは、 ファイルは じモジュールであり、 の と を する.ESMはCJSに して な がある.すなわちESMは な である. ローディングは、モジュールシステムの を に させ、モジュールシステムが な ツリー(AST)に づいて に できるようにするとともに、ESMは、ローディングステートメントがモジュールの に かれることを し、 と チェックを いに する.
Node.js v 8.5.0では、ESMはもう つのflagsを じて くことができます.ほとんどの のブラウザはESMをサポートしています.
WebpackはBrowserifyの として が いので、 には モジュールの の に りました.Babelサポート ES 6のように、Webpackは くからESMのimportおよびexport およびimport() ローディング をサポートしてきた.また、ESMに づいて、code-splitting を し、アプリケーションコードを のファイルに して、ヘッドスクリーンローディング を させることができる.
ESMはオリジナルのモジュールローディング であり、 も できます.
は の のリンクをリンクします.
の に してください.コードパワー です.
uva 1588ギアチェンジ