ホームページ > 記事 > ウェブフロントエンド > r.js を使用したパッケージ化とモジュール化に関するサンプル チュートリアルを共有する
r.js を使用したパッケージ化とモジュール化に関するサンプル チュートリアルを共有する
- 零下一度オリジナル
- 2017-06-15 13:18:411602ブラウズ
この記事では主に、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(['s1','s2'], function(a,b){
console.log(a+b);
});index.html ファイルを実行すると、依存するリソースは以下のようになります
[パッケージ化]
<!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コマンド
node r.js -o build.js命令
项目根目录下，生成一个out.js文件，内容如下
({
baseUrl: "./",
name:'main',
out:'out.js'
})将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(['../common/jquery'],function (){
return $('p').height();
})
//s2.js
define(['../common/jquery'],function (){
return $('p').width();
})n(e,t){console.log(parseInt(e)+parseInt(t))}),define("main",function(){});
【不包含jQuery】
如果其他页面也需要用到jQuery，它们打包的时候，也会把jQuery打包。这样，相当于每个页面都打包了一次jQuery，性能很差。更好的做法是，不打包jQuery，其他页面引用jQuery时，就可以使用缓存了。
build.js内容如下所示
({
appDir: './', //项目根目录
dir: './dist', //输出目录，全部文件打包后要放入的文件夹（如果没有会自动新建的）
baseUrl:'./',
modules: [ //要优化的模块，相对baseUrl的路径，也是省略后缀“.js”
{ name:'main' }
],
fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/, //过滤，匹配到的文件将不会被输出到输出目录去
optimizeCss: 'standard',
removeCombined: true //如果为true，将从输出目录中删除已合并的文件
})接下来运行node r.js -o build.js
({
appDir: './', //项目根目录
dir: './dist', //输出目录，全部文件打包后要放入的文件夹（如果没有会自动新建的）
baseUrl:'./',
modules: [ //要优化的模块，相对baseUrl的路径，也是省略后缀“.js”
{
name:'main',
exclude: ['js/common/jquery']//不打包jQuery
}
],
fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/, //过滤，匹配到的文件将不会被输出到输出目录去
optimizeCss: 'standard',
removeCombined: true //如果为true，将从输出目录中删除已合并的文件
})index.html のエントリファイルを「out.js」に変更します。ファイルは通常どおり実行できます
rrreee
🎜🎜🎜【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 サイトの他の関連記事を参照してください。