分享利用r.js打包模組化的實例教程-js教程-PHP中文網

首頁

web前端

js教程

分享利用r.js打包模組化的實例教程

零下一度

Jun 15, 2017 pm 01:18 PM

打包

這篇文章主要給大家介紹了利用r.js打包模組化的javascript檔案的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來跟著小編一起看看吧。

前言

r.js(本地下載)是requireJS的最佳化（Optimizer）工具，可以實作前端檔案的壓縮與合併，在requireJS非同步按需載入的基礎上進一步提供前端最佳化，減少前端檔案大小、減少對伺服器的檔案請求。本文將詳細介紹r.js的相關內容，有興趣的朋友們下面來一起看看吧。

簡單打包

#【專案結構】

以簡單的例子來說明r.js的使用。這個專案名稱為'demo'，在js目錄下包含s1.js和s2.js兩個文件，使用requirejs進行模組化，內容如下

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

使用main .js來呼叫s1.js和s2.js這兩個檔案

require([&#39;s1&#39;,&#39;s2&#39;], 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>

運行index.html文件，所依賴資源如下圖所示

#【打包】

接下來，使用r.js來對javascript檔案進行打包，而r.js需要使用build.js檔案來進行配置，配置如下

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

接下來運行

node r .js -o build.js指令

專案根目錄下，產生一個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(){});

將index.html的入口檔案修改為'out.js'，檔案仍能正常運作

<!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>

#jQuery打包

一般地，我們並不是使用原生javascript進行開發，更多的使用函式庫進行高效開發，以jQuery為例，對上面的程式碼進行改造

s1模組和s2模組，分別基於jQuery來取得頁面p元素的寬、高，內容如下

//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();
})

專案結構如下所示，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，則程式碼如下所示

({ 
 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，将从输出目录中删除已合并的文件
})

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;,
  exclude: [&#39;js/common/jquery&#39;]//不打包jQuery
 } 
 ], 
 fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/, //过滤，匹配到的文件将不会被输出到输出目录去
 optimizeCss: &#39;standard&#39;, 
 removeCombined: true //如果为true，将从输出目录中删除已合并的文件
})

接下來執行

node r.js -o build.js

#命令

############運行後，產生一個'dist'資料夾，該資料夾包含的檔案都是處理過後的文件，適合上線##### #######

以上是分享利用r.js打包模組化的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

分享PyCharm项目打包的简易方法Dec 30, 2023 am 09:34 AM

简单易懂的PyCharm项目打包方法分享随着Python的流行，越来越多的开发者使用PyCharm作为Python开发的主要工具。PyCharm是功能强大的集成开发环境，它提供了许多方便的功能来帮助我们提高开发效率。其中一个重要的功能就是项目的打包。本文将介绍如何在PyCharm中简单易懂地打包项目，并提供具体的代码示例。为什么要打包项目？在Python开发

如何使用Python正则表达式进行代码打包和分发Jun 23, 2023 am 09:31 AM

随着Python编程语言的日益流行，越来越多的开发者开始使用Python编写代码。但是在实际使用中，我们常常需要将这些代码打包并分发给其他人使用。本文将介绍如何使用Python正则表达式进行代码打包和分发。一、Python代码打包在Python中，我们可以使用setuptools和distutils等工具来打包我们的代码。这些工具可以将Python文件、模块

怎么使用pkg将Node.js项目打包为可执行文件？Jul 26, 2022 pm 07:33 PM

如何用pkg打包nodejs可执行文件？下面本篇文章给大家介绍一下使用pkg将Node.js项目打包为可执行文件的方法，希望对大家有所帮助！

linux打包是什么意思Feb 23, 2023 pm 06:30 PM

在linux中，打包指的是一个文件或目录的集合，而这个集合被存储在一个文件中；简单来说，打包是指将一大堆文件或目录变成一个总的文件。打包文件没有经过压缩，因此它占用的空间是其中所有文件和目录的总和。

Python 代码变身独立应用：PyInstaller 的炼金术Feb 19, 2024 pm 01:27 PM

PyInstaller是一个开源库，允许开发者将python代码编译为平台无关的自包含可执行文件（.exe或.app）。它通过将Python代码、依赖项和支持文件打包在一起来实现这一目标，从而创建独立应用程序，无需安装Python解释器即可运行。PyInstaller的优势在于它消除了对Python环境的依赖性，使应用程序可以轻松分发和部署给最终用户。它还提供了构建器模式，使用户可以自定义应用程序的设置、图标、资源文件和环境变量。使用PyInstaller打包Python代码安装PyInstal

Python 应用的独立宣言：PyInstaller 的自由之路Feb 20, 2024 am 09:27 AM

PyInstaller：Python应用的独立化PyInstaller是一款开源的python打包工具，它将Python应用程序及其依赖项打包为一个独立的可执行文件。这一过程消除了对Python解释器的依赖，同时允许应用程序在各种平台上运行，包括windows、MacOS和linux。打包过程PyInstaller的打包过程相对简单，涉及以下步骤：pipinstallpyinstallerpyinstaller--onefile--windowedmain.py--onefile选项创建一个单一

Python 应用的终极进化：PyInstaller 的破茧成蝶Feb 19, 2024 pm 03:27 PM

PyInstaller是一个革命性的工具，它赋予python应用程序以超越其原始脚本形态的能力。通过将Python代码编译成独立的可执行文件，PyInstaller解锁了代码分发、部署和维护的新境界。从单一脚本到强大应用程序以往，Python脚本只存在于特定的Python环境中。分发这样的脚本需要用户安装Python和必要的库，这是一个费时且繁琐的过程。PyInstaller引入了打包的概念，将Python代码与所有必需的依赖项组合成一个单独的可执行文件。代码打包的艺术PyInstaller的工

web前端打包工具有哪些Aug 23, 2022 pm 05:31 PM

web前端打包工具有：1、Webpack，是一个模块化管理工具和打包工具可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序；2、Grunt，一个前端打包构建工具；3、Gulp，用代码方式来写打包脚本；4、Rollup，ES6模块化打包工具；5、Parcel，一款速度极快、零配置的web应用程序打包器；6、equireJS，是一个JS文件和模块加载器。

See all articles