r.js를 사용하여 패키징하고 모듈화하는 방법에 대한 예제 튜토리얼 공유
- 零下一度원래의
- 2017-06-15 13:18:411606검색
이 기사에서는 r.js를 사용하여 모듈식 자바스크립트 파일을 패키징하는 방법에 대한 관련 정보를 주로 소개합니다. 기사의 소개는 매우 자세하며 필요한 모든 사람을 위한 특정 참조 및 학습 가치가 있습니다. 봐.
Foreword
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(['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>
index.html 파일을 실행하면, 종속 리소스는 아래와 같습니다
[패키징]
다음으로 r.js를 사용하여 javascript 파일을 패키징하는데, r.js는 build.js 파일을 사용하여 구성해야 합니다. 구성은 다음과 같습니다.
({
baseUrl: "./",
name:'main',
out:'out.js'
}) 다음으로 를 실행합니다. node r.js -o build.jsCommand<code>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(['../common/jquery'],function (){
return $('p').height();
})
//s2.js
define(['../common/jquery'],function (){
return $('p').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: './', //项目根目录
dir: './dist', //输出目录，全部文件打包后要放入的文件夹（如果没有会自动新建的）
baseUrl:'./',
modules: [ //要优化的模块，相对baseUrl的路径，也是省略后缀“.js”
{ name:'main' }
],
fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/, //过滤，匹配到的文件将不会被输出到输出目录去
optimizeCss: 'standard',
removeCombined: true //如果为true，将从输出目录中删除已合并的文件
})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',
exclude: ['js/common/jquery']//不打包jQuery
}
],
fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/, //过滤，匹配到的文件将不会被输出到输出目录去
optimizeCss: 'standard',
removeCombined: true //如果为true，将从输出目录中删除已合并的文件
})接下来运行node r.js -o build.js
프로젝트 루트 디렉터리에서 다음 내용으로 out.js 파일을 생성합니다
index.html 항목 파일을 'out.js'로 수정하면 파일이 정상적으로 실행됩니다
🎜🎜🎜【JQuery 포함】🎜🎜🎜패키징된 main.js에 jQuery.js를 포함하려는 경우 코드는 다음과 같습니다🎜🎜🎜🎜 rrreee🎜 n(e,t){console.log(parseInt(e)+parseInt(t))}),define("main",function(){});🎜🎜🎜【jQuery는 포함되지 않음】🎜🎜🎜 다른 페이지도 jQuery를 사용해야 하는 경우, 페이지가 패키징되면 jQuery도 패키징됩니다. 이런 방식은 각 페이지마다 jQuery를 한 번 패키징하는 것과 동일하며 성능이 매우 낮습니다. 더 나은 접근 방식은 jQuery를 패키징하지 않는 것입니다. 그러면 다른 페이지에서 jQuery를 참조할 때 캐시를 사용할 수 있습니다. 🎜🎜build.js 내용은 다음과 같습니다🎜🎜🎜🎜🎜rrreee🎜다음 node r.js -o build.js 명령을 실행하세요🎜🎜🎜🎜🎜🎜실행 후 'dist'는 생성된 폴더, 이 폴더에 포함된 파일은 모두 온라인에 적합한 처리된 파일입니다🎜🎜🎜🎜위 내용은 r.js를 사용하여 패키징하고 모듈화하는 방법에 대한 예제 튜토리얼 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!