Home > Article > Web Front-end > Share an example tutorial on using r.js to package and modularize

Share an example tutorial on using r.js to package and modularize

零下一度Original: 2017-06-15 13:18:411561browse

This article mainly introduces you to the relevant information about using r.js to package modular javascript files. The introduction in the article is very detailed and has certain reference and learning value for everyone. Friends who need it can follow the editor below. Let's see.

Preface

r.js (local download) is the optimization (Optimizer) tool of requireJS, which can compress and merge front-end files. Based on the asynchronous on-demand loading of requireJS, it further provides front-end optimization to reduce front-end file size and file requests to the server. This article will introduce the relevant content of r.js in detail. Friends who are interested can take a look below.

Simple packaging

[Project structure]

With a simple example To illustrate the use of r.js. The project name is 'demo'. It contains two files, s1.js and s2.js, in the js directory. It is modularized using requirejs. The content is as follows

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

Use main .js to call the two files s1.js and s2.js

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

index.html content is as follows

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

Run the index.html file, and the dependent resources are as shown below

[Packaging]

Next, use r.js is used to package javascript files, and r.js needs to be configured using the build.js file. The configuration is as follows

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

Next runnode r .js -o build.jsCommand

In the project root directory, generate an out.js file with the following content

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

Modify the entry file of index.html to 'out.js', the file can still run normally

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

#Generally, we do not use native javascript for development, but more use libraries for efficient development. Take jQuery as an example to transform the above code

s1 module and s2 module are respectively based on jQuery to obtain the width and height of the page p element. The content is as follows

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

The project structure is as follows, js The folder includes two subfolders, common and module. The common folder contains the common require.js and jquery.js, and the module folder contains the modules s1.js and s2.js.

In the root directory of the page, there are index.html, entry file main.js, r.js and build.js

【 Contains jQuery】

If the packaged main.js wants to include jQuery.js, the code is as follows

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

【Excluding jQuery】

If other pages also need to use jQuery, they will also package jQuery when they are packaged. In this way, it is equivalent to packaging jQuery once for each page, and the performance is very poor. A better approach is not to package jQuery, so that when other pages reference jQuery, you can use the cache.

The content of build.js is as follows

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

Next runnode r.js -o build.js After the command

is run, a 'dist' folder is generated. The files contained in this folder are processed files and are suitable for online use

The above is the detailed content of Share an example tutorial on using r.js to package and modularize. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：10 recommended articles about ie8 compatibilityNext article：10 recommended articles about ie8 compatibility

See more

Share an example tutorial on using r.js to package and modularize

Related articles