RequireJS 文件合併壓縮

時間 2019-12-18

標籤 requirejs 文件合併壓縮欄目 JavaScript 简体版

原文原文鏈接

RequireJS的define 以及require 對於咱們進行簡化JavaScript 開發，進行模塊化的處理具備很大的幫助javascript

可是請求加載的js 文件會有一些影響，通常的處理是對於文件進行壓縮，可是requirejs 的壓縮不是簡單的css

進行壓縮就行。html

RequireJS提供了一個打包壓縮工具r.js來對模塊進行合併壓縮。r.js很是強大，不但能夠壓縮js，css，甚至java

能夠對整個項目進行打包。node

使用的方法爲：npm

1. 項目結構app

文件說明：模塊化

model 中的爲定義的模塊工具

main.js 爲頁面加載須要使用的requirejs

appinfo.js 內容爲：

define(function () {


    var appinfo = { name: "dalnog", age: 22 };

    return appinfo;


});

refjs.js 內容爲：

define(["model/user"], function (user) {


    var myinfo = {

        userinfo: user
    };

    return myinfo;

});

user.js 內容爲：

define(function () {


    var user = { name: "dalnog", age: 22 };

    return user;


});

index.htm 頁面信息以下：

<!DOCTYPE >
<html  >
<head>
    <title></title>
</head>
<body>


//   壓縮的使用方法
  <!--  <script   data-main="dalongappinfo-built" src="Scripts/require.js" type="text/javascript"></script>-->

//   默認的使用方法
    <script   data-main="main" src="Scripts/require.js" type="text/javascript"></script>
</body>
</html>

壓縮的方法：

1. 安裝node

2. 運行npm 安裝 requirejs 自帶r.js

命令爲： npm install -g requirejs

3. 配置命令文件 config.js

信息爲：

({

baseUrl: ".",  ///  文件的路徑

name: "main",  ///  入口文件  就是main.js

///  實際壓縮以後使用的js 文件
out: "dalongappinfo-built.js"

})

4. 運行命令 node r.js -o config.js

以後生成對應的文件： dalongappinfo-built.js

5. 使用：
見上面的 index.htm

命令參數解析：

下面咱們對命令分別來作一下解釋：

-o： 表示優化，該參數是固定的，必選。

baseUrl：指存模塊的根目錄，可選。

name： 模塊的入口文件，這裏是app,那麼r.js會從baseUrl+name去查找app.js，而後找出全部依賴的模塊，而後進行合併與壓縮。

out: 指合併壓縮後輸出的文件路徑，這裏是直接輸出在根目錄下build.js 咱們也能夠輸出到其餘目錄下好比js/app 目錄下，也能夠的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。