r.js を使用したパッケージ化とモジュール化に関するサンプルチュートリアルを共有する-jsチュートリアル-php.cn

r.js を使用したパッケージ化とモジュール化に関するサンプルチュートリアルを共有する

零下一度

リリース： 2017-06-15 13:18:41

オリジナル

1606 人が閲覧しました

この記事では主に、r.js を使用してモジュラー JavaScript ファイルをパッケージ化することに関する関連情報を紹介します。記事内の紹介は非常に詳細であり、必要な場合はエディターに従って学習することができます。見てください。

はじめに

r.js (ローカルダウンロード) は、requireJS の最適化 (Optimizer) ツールであり、フロントエンドファイルの圧縮とマージを実現できます。 requireJS の非同期オンデマンド読み込みにより、フロントエンドのファイルサイズが削減され、サーバーへのファイルリクエストが削減されます。この記事では、r.js の関連コンテンツを詳しく紹介します。興味のある方は以下をご覧ください。

簡単なパッケージ化

【プロジェクト構造】

r.jsの使い方を説明する簡単な例。プロジェクト名は「demo」です。 js ディレクトリに s1.js と s2.js の 2 つのファイルが含まれています。内容は次のとおりです

//s1.js
define(function (){
 return 1;
})
//s2.js
define(function (){
 return 2;
})

ログイン後にコピー

s1 を呼び出すには、main.js を使用します。 .js と s2。これら 2 つの js ファイルの内容は次のとおりです

require([&#39;s1&#39;,&#39;s2&#39;], function(a,b){
　　console.log(a+b);
});

ログイン後にコピー

index.html ファイルを実行すると、依存するリソースは以下のようになります

[パッケージ化]

次に、r.jsを使用してjavascriptファイルをパッケージ化します。r.jsはbuild.jsファイルを使用して構成する必要があります。構成は次のとおりです

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script data-main="js/main" src="js/require.js"></script>
</head>
<body>
</body>
</html>

ログイン後にコピー

次に、を実行します。 node r.js -o build.jsコマンド

プロジェクトのルートディレクトリで、次の内容の out.js ファイルを生成します

node r.js -o build.js命令

项目根目录下，生成一个out.js文件，内容如下

({
 baseUrl: "./",
 name:&#39;main&#39;,
 out:&#39;out.js&#39;
})

ログイン後にコピー

将index.html的入口文件修改为'out.js'，文件依然能正常运行

define("s1",[],function(){return 1}),define("s2",[],function(){return 2}),require(["s1","s2"],function(n,e){console.log(n+e)}),define("main",function(){});

ログイン後にコピー

jQuery打包

一般地，我们并不是使用原生javascript进行开发，更多的使用库进行高效开发，以jQuery为例，对上面的代码进行改造

s1模块和s2模块，分别基于jQuery来获取页面p元素的宽、高，内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script data-main="js/out" src="js/require.js"></script>
</head>
<body>
</body>
</html>

ログイン後にコピー

项目结构如下所示，js文件夹包括common和module两个子文件夹，common文件夹包含公用的require.js和jquery.js，module文件夹包含模块s1.js和s2.js。

页面的根目录下，有index.html、入口文件main.js、以及r.js和build.js

【包含jQuery】

如果打包后的main.js要包含jQuery.js，则代码如下所示

//s1.js
define([&#39;../common/jquery&#39;],function (){
 return $(&#39;p&#39;).height();
})
//s2.js
define([&#39;../common/jquery&#39;],function (){
 return $(&#39;p&#39;).width();
})

ログイン後にコピー

n(e,t){console.log(parseInt(e)+parseInt(t))}),define("main",function(){});

【不包含jQuery】

如果其他页面也需要用到jQuery，它们打包的时候，也会把jQuery打包。这样，相当于每个页面都打包了一次jQuery，性能很差。更好的做法是，不打包jQuery，其他页面引用jQuery时，就可以使用缓存了。

build.js内容如下所示

({ 
 appDir: &#39;./&#39;, //项目根目录
 dir: &#39;./dist&#39;, //输出目录，全部文件打包后要放入的文件夹（如果没有会自动新建的）
 baseUrl:&#39;./&#39;,
 modules: [ //要优化的模块，相对baseUrl的路径，也是省略后缀“.js”
 { name:&#39;main&#39; } 
 ], 
 fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/, //过滤，匹配到的文件将不会被输出到输出目录去
 optimizeCss: &#39;standard&#39;, 
 removeCombined: true //如果为true，将从输出目录中删除已合并的文件
})

ログイン後にコピー

接下来运行node r.js -o build.js

({ 
 appDir: &#39;./&#39;, //项目根目录
 dir: &#39;./dist&#39;, //输出目录，全部文件打包后要放入的文件夹（如果没有会自动新建的）
 baseUrl:&#39;./&#39;,
 modules: [ //要优化的模块，相对baseUrl的路径，也是省略后缀“.js”
 { 
  name:&#39;main&#39;,
  exclude: [&#39;js/common/jquery&#39;]//不打包jQuery
 } 
 ], 
 fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/, //过滤，匹配到的文件将不会被输出到输出目录去
 optimizeCss: &#39;standard&#39;, 
 removeCombined: true //如果为true，将从输出目录中删除已合并的文件
})

ログイン後にコピー

index.html のエントリファイルを「out.js」に変更します。ファイルは通常どおり実行できます

rrreee

🎜jQueryのパッケージ化🎜🎜🎜🎜 🎜通常、私たちは開発にネイティブJavaScriptを使用しませんが、より効率的な開発のためにライブラリを使用します。 jQueryを例として、上記のコードを変換します🎜🎜 s1モジュールとs2 モジュールはそれぞれ jQuery に基づいてページの幅、高さ、コンテンツを取得します🎜🎜🎜rrreee🎜 プロジェクトの構造は次のとおりです。common と module の 2 つのサブフォルダーが含まれます。 common フォルダーには共通の require.js と jquery.js が含まれ、module フォルダーにはモジュール s1 と s2.js が含まれます。 🎜🎜ページのルートディレクトリには、index.html、エントリーファイルmain.js、r.js、build.jsがあります🎜🎜

🎜🎜🎜【jQueryを含める】🎜🎜🎜パッケージ化されたmain.jsにjQuery.jsを含めたい場合のコードは以下の通りです🎜🎜🎜🎜 rrreee🎜 n(e,t){console.log(parseInt(e)+parseInt(t))}),define("main",function(){});🎜🎜🎜【jQueryは含まれません】🎜🎜🎜他のページでも jQuery を使用する必要がある場合、それらのページがパッケージ化されると、jQuery もパッケージ化されます。この方法では、ページごとに jQuery を 1 回パッケージ化するのと同じになり、パフォーマンスが非常に悪くなります。より良いアプローチは、他のページが jQuery を参照するときにキャッシュを使用できるように、jQuery をパッケージ化しないことです。 🎜🎜build.jsの内容は次のとおりです🎜🎜🎜🎜🎜rrreee🎜次にnode r.js -o build.jsコマンドを実行します🎜🎜🎜🎜🎜🎜実行後、「dist」は生成されたフォルダー、このフォルダーに含まれるファイルはすべて処理されたファイルであり、オンラインに適しています🎜🎜🎜🎜

以上がr.js を使用したパッケージ化とモジュール化に関するサンプルチュートリアルを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。