React開発中の疑問:requireとimportの違い
4281 ワード
第一問:Reactにおけるrequireとimportの違いは何ですか?
これはreact特有のものではなく、js共有のものです.require方法はCommunJsが発表したもので、NodeJsはこの機能を持っています.importはES 6の発売です.
第二問:ES 6においてrequireとimportは等価ですか?
ES 6で開発しています.私たちのコードの中で、もう一つのモジュールが文法に導入されます.それはimportです.importはcomonjsフォーマットまたはAMDフォーマットに変換されますので、新しいモジュール参照方式として考えないでください.babelはデフォルトでES 6のモジュールをcomonjsの仕様に変えます.あなたも苦労しなくてAMDに変えます.
したがって、以下の表記は等価です.import list from./list'//var list=require('./list')に相当します.
第三問:webpackにおけるrequireとimportの違いを教えてください.
webpackでは、commmonjs形式のrequire同期文法を書いてもいいです.AMD形式のrequire逆調文法とrequire.ensureとwebpackが自分で定義したrequire.includeと、ES 6のimport文法とを書いてもいいです.こんなに多くの人を混乱させてしまうのではないですか?本編では、これらのrequireのそれぞれの特徴と、どのような場面で使われていますか?
common js同期文法
古典的なcomonjs同期文法は以下の通りです.var a=require('./a')a.show();この時webpackはa.jsを引用ファイルに梱包します.これは最も普遍的な状況であり,くどくど述べる必要はない.
common js非同期ローディング
commmonjsにModules/Async/A仕様があります.中にはrequire.ensure文法が定義されています.webpackはそれを実現しました.役割は包装する時にコードのスライスを行うことができます.そしてスプリット後のコードを非同期的にロードします.使い方は以下の通りです
require.ensure([],function(require){var list=require('./list');list.show());
この時、list.jsは単独のchunkファイルに包装されます.大体長さはこうです.1.fb 874860 b 35831 bc 96 a 8 js.
可読性が悪いです.前のエンディングでも言及しましたが、ネーミングの仕方はrequire.ensureに第三のパラメータを伝えることです.
「question/list」のように階層的な名前が入ってきます.そうすると、webpackは階層別にフォルダを作成します.注意したいのは、require.ensureの関数で2つ以上のモジュールを引用したら、webpackはそれらを一緒に梱包します.
require.ensure([],function(require){var list=require];list.show();var edit=require('./edit');edit.display(),',listudet';
list.jsとedit.jsは一つのファイルに包装されます.そしてlist_と名づけます.and_edit.js.これはあなたの実際の状況によって測定しなければなりません.一緒に梱包したくないなら、二つのrequire.ensureをそれぞれ引用してください.多く1つ言って、このような思惟は実は私はとても好きではありませんて、符号化の段階で包装の事に対して決定をして、明らかに職責の分離の原則に背きました.
common jsプリロード怠惰実行
上記の使い方では、require.ensureの最初のパラメータに空配列を伝えましたが、実はここではモジュール名を受信できます.使い方は以下の通りです.require.ensure('./list')、function(require){var list=require('./list');list.show();require.ensureに最初のパラメータを転送しました.ここに実行するとlist.jsはブラウザにダウンロードされますが、list.jsモジュールのコードは実行されません.つまりwebpack公式サイトではevaluateは行われません.本当にevaluateを行う時は後の文のvar list=require('./list')です.これはいわゆる怠惰な実行です.関数に書いてある複数のモジュールは一緒に包装されます.この点は上と同じです.また、配列に書いてあるモジュールも彼らと一緒に包装します.手動で実行してもいいです.このような書き方もちょっと違和感があります.comonjsとAMDの結合体のようです.モジュール名も二回書くので、優雅さが足りません.だからwebpackは自分で方法を定義し、プリロードを実現することができます.
webpackが持参するrequire、include
require.includeはwebpack自身が提供したもので、バックグラウンドとしての規範はあまりないので、小役です.上にプリローディング機能があります.モジュールを配列に書かなくてもいいです.使い方は以下のようになります.webpack公式文書によると、require.includeはもう一つの役割を果たしています.サブモジュールの公共部分を親モジュールに抽出します.例えば、child 1とchild 2はlist.jsというモジュールを引用しています.parentでincludeがlist.jsになったら、サブモジュールの中から削除されます.(ここでは親子関係というのは引用関係のことです.)この方法は政府も一筆持っています.見たところ鶏の脇腹のようなもので、あまり役に立ちません.require.includeの戻り値がundefinedであることを発見しました.つまり、モジュールを使用したいなら、姿勢はこうです.
AMD非同期ローディング
webpackは、comonjs仕様をサポートしているだけでなく、AMD仕様をサポートしています.これは、AMDの古典文法が正常に使用できることを意味します.もちろん、このように書くとlist.jsも単独で一つのファイルに包装されます.上記と同様に、ここに複数のモジュールを書いたら、これらのモジュールは一つのファイルに包装されます.例えば、require('./list'、'./edit')、function(list,edit){list.show();edisplay();list.jsとedit.jsは一緒に包装されます.異なるのは、AMD方式はファイル名として3つ目のパラメータに入ることができませんので、素晴らしいファイルが得られません.
ES 6 import
今はES 6を使わなくても挨拶ができません.だから、私たちのコードの中に、もう一つのモジュールが文法を導入します.それはimportです.importはcomonjsフォーマットまたはAMDフォーマットに変換されますので、新しいモジュール参照方式として考えないでください.babelはデフォルトでES 6のモジュールをcomonjsの仕様に変えます.あなたも苦労しなくてAMDに変えます.したがって、以下の表記は等価です.import list from./list'//var list=require('./list')に相当します.でも、この二つの書き方は一つを選ぶだけで、コードの中で同時に二つを使うことを避けます.
まとめ:
以上はrequireの使い方をもう一度しごいて、それぞれの用法の違いが分かりました.その後、プロジェクトの中で選択できます.一番いい選択はcomonjs方向に寄って、ES 6を試したいなら、comonjs同期文法の代わりにimportを使えばいいと思います.そのため、コードの中で以下の2つのスタイルを維持すればいいです./一緒に包装できる同期コードは、import文法import list from'./list';独立して包装して、非同期でロードするコードが必要で、require.ensurequire.ensure([],function(require)｛var list=require('./list')));
コードを書く時、包装結果を決定する必要があるのは明らかです.これは私がwebpackが好きではない理由です.gulpのようにいいです.コードはコードです.コンパイルはコンパイルです.別々に来てください.でも、これはwebpackがモジュールを中心とした包装方式の特徴です.仁者は仁義にかなって、チーム内で約束をしさえすれば、めちゃくちゃになることはありません.もしあなたが新米ならば、comonjsとAMDのそれぞれの特徴はまだよく分かりません.私が以前書いたこの記事を見に行くことをオススメします.
これはreact特有のものではなく、js共有のものです.require方法はCommunJsが発表したもので、NodeJsはこの機能を持っています.importはES 6の発売です.
第二問:ES 6においてrequireとimportは等価ですか?
ES 6で開発しています.私たちのコードの中で、もう一つのモジュールが文法に導入されます.それはimportです.importはcomonjsフォーマットまたはAMDフォーマットに変換されますので、新しいモジュール参照方式として考えないでください.babelはデフォルトでES 6のモジュールをcomonjsの仕様に変えます.あなたも苦労しなくてAMDに変えます.
したがって、以下の表記は等価です.import list from./list'//var list=require('./list')に相当します.
第三問:webpackにおけるrequireとimportの違いを教えてください.
webpackでは、commmonjs形式のrequire同期文法を書いてもいいです.AMD形式のrequire逆調文法とrequire.ensureとwebpackが自分で定義したrequire.includeと、ES 6のimport文法とを書いてもいいです.こんなに多くの人を混乱させてしまうのではないですか?本編では、これらのrequireのそれぞれの特徴と、どのような場面で使われていますか?
common js同期文法
古典的なcomonjs同期文法は以下の通りです.var a=require('./a')a.show();この時webpackはa.jsを引用ファイルに梱包します.これは最も普遍的な状況であり,くどくど述べる必要はない.
common js非同期ローディング
commmonjsにModules/Async/A仕様があります.中にはrequire.ensure文法が定義されています.webpackはそれを実現しました.役割は包装する時にコードのスライスを行うことができます.そしてスプリット後のコードを非同期的にロードします.使い方は以下の通りです
require.ensure([],function(require){var list=require('./list');list.show());
この時、list.jsは単独のchunkファイルに包装されます.大体長さはこうです.1.fb 874860 b 35831 bc 96 a 8 js.
可読性が悪いです.前のエンディングでも言及しましたが、ネーミングの仕方はrequire.ensureに第三のパラメータを伝えることです.
require.ensure([], function(require){ var list = require('./list'); list.show();}, 'list');
「question/list」のように階層的な名前が入ってきます.そうすると、webpackは階層別にフォルダを作成します.注意したいのは、require.ensureの関数で2つ以上のモジュールを引用したら、webpackはそれらを一緒に梱包します.
require.ensure([],function(require){var list=require];list.show();var edit=require('./edit');edit.display(),',listudet';
list.jsとedit.jsは一つのファイルに包装されます.そしてlist_と名づけます.and_edit.js.これはあなたの実際の状況によって測定しなければなりません.一緒に梱包したくないなら、二つのrequire.ensureをそれぞれ引用してください.多く1つ言って、このような思惟は実は私はとても好きではありませんて、符号化の段階で包装の事に対して決定をして、明らかに職責の分離の原則に背きました.
common jsプリロード怠惰実行
上記の使い方では、require.ensureの最初のパラメータに空配列を伝えましたが、実はここではモジュール名を受信できます.使い方は以下の通りです.require.ensure('./list')、function(require){var list=require('./list');list.show();require.ensureに最初のパラメータを転送しました.ここに実行するとlist.jsはブラウザにダウンロードされますが、list.jsモジュールのコードは実行されません.つまりwebpack公式サイトではevaluateは行われません.本当にevaluateを行う時は後の文のvar list=require('./list')です.これはいわゆる怠惰な実行です.関数に書いてある複数のモジュールは一緒に包装されます.この点は上と同じです.また、配列に書いてあるモジュールも彼らと一緒に包装します.手動で実行してもいいです.このような書き方もちょっと違和感があります.comonjsとAMDの結合体のようです.モジュール名も二回書くので、優雅さが足りません.だからwebpackは自分で方法を定義し、プリロードを実現することができます.
webpackが持参するrequire、include
require.includeはwebpack自身が提供したもので、バックグラウンドとしての規範はあまりないので、小役です.上にプリローディング機能があります.モジュールを配列に書かなくてもいいです.使い方は以下のようになります.webpack公式文書によると、require.includeはもう一つの役割を果たしています.サブモジュールの公共部分を親モジュールに抽出します.例えば、child 1とchild 2はlist.jsというモジュールを引用しています.parentでincludeがlist.jsになったら、サブモジュールの中から削除されます.(ここでは親子関係というのは引用関係のことです.)この方法は政府も一筆持っています.見たところ鶏の脇腹のようなもので、あまり役に立ちません.require.includeの戻り値がundefinedであることを発見しました.つまり、モジュールを使用したいなら、姿勢はこうです.
AMD非同期ローディング
webpackは、comonjs仕様をサポートしているだけでなく、AMD仕様をサポートしています.これは、AMDの古典文法が正常に使用できることを意味します.もちろん、このように書くとlist.jsも単独で一つのファイルに包装されます.上記と同様に、ここに複数のモジュールを書いたら、これらのモジュールは一つのファイルに包装されます.例えば、require('./list'、'./edit')、function(list,edit){list.show();edisplay();list.jsとedit.jsは一緒に包装されます.異なるのは、AMD方式はファイル名として3つ目のパラメータに入ることができませんので、素晴らしいファイルが得られません.
ES 6 import
今はES 6を使わなくても挨拶ができません.だから、私たちのコードの中に、もう一つのモジュールが文法を導入します.それはimportです.importはcomonjsフォーマットまたはAMDフォーマットに変換されますので、新しいモジュール参照方式として考えないでください.babelはデフォルトでES 6のモジュールをcomonjsの仕様に変えます.あなたも苦労しなくてAMDに変えます.したがって、以下の表記は等価です.import list from./list'//var list=require('./list')に相当します.でも、この二つの書き方は一つを選ぶだけで、コードの中で同時に二つを使うことを避けます.
まとめ:
以上はrequireの使い方をもう一度しごいて、それぞれの用法の違いが分かりました.その後、プロジェクトの中で選択できます.一番いい選択はcomonjs方向に寄って、ES 6を試したいなら、comonjs同期文法の代わりにimportを使えばいいと思います.そのため、コードの中で以下の2つのスタイルを維持すればいいです./一緒に包装できる同期コードは、import文法import list from'./list';独立して包装して、非同期でロードするコードが必要で、require.ensurequire.ensure([],function(require)｛var list=require('./list')));
コードを書く時、包装結果を決定する必要があるのは明らかです.これは私がwebpackが好きではない理由です.gulpのようにいいです.コードはコードです.コンパイルはコンパイルです.別々に来てください.でも、これはwebpackがモジュールを中心とした包装方式の特徴です.仁者は仁義にかなって、チーム内で約束をしさえすれば、めちゃくちゃになることはありません.もしあなたが新米ならば、comonjsとAMDのそれぞれの特徴はまだよく分かりません.私が以前書いたこの記事を見に行くことをオススメします.