requirejs 使用实例r.js打包

在这里,请先看基础文章与相关技术文档:

  1. 安装:

    npm init
    npm install requirejs --save
    npm install [email protected]1.11.1 --save
    
    创建基本目录:
    js/main.js&test.js
    css/index.css
    index.html
    build.js
    copy requirejs目录下的r.js到根目录
    
    创建导出目录:one
    
    测试目录创建完成!
  2. index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
    <iframe class="iframe" src="http://baidu.com" frameborder="0" height="300"></iframe>
    
    <script type="text/javascript" defer anync="true" src="node_modules/requirejs/require.js" data-main="js/main"></script>
    </body>
    </html>
  3. build.js

    //参考配置目录  http://www.yfznw.com/node/22({
        dir:‘./one‘,//输出路径
        paths:{
            jquery:‘node_modules/jquery/dist/jquery.min‘,
            test:‘js/test‘,
            index:‘css/index.css‘
        },
        name: ‘js/main‘,// 模块入口
        optimize: ‘none‘,//是否压缩 默认是压缩的,去掉不要就是压缩
    })
  4. main.js
    require.config({
        baseUrl:‘node_modules/‘,
        paths:{
            ‘jquery‘:‘jquery/dist/jquery.min‘,
            ‘js‘:‘../js‘
        }
    });
    require([‘jquery‘,‘js/test‘],function($,test) {
        console.log($);
        test.one();
    });
  5. test.js
    define([],function() {
       var testing = {};
    
       testing.one = function() {
           console.log(‘module testing‘);
       };
    
        return testing
    });
  6. index.css (主要只是存在而己,设定了流动条样式)
    @charset "utf-8";
    
    *::-webkit-scrollbar{width:2px;height:12px;}
    *::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{width:0;height:0;}
    *::-webkit-scrollbar-button:vertical:increment{background:transparent;}
    *::-webkit-scrollbar-track-piece:vertical{background:#DFE7EF;}
    *::-webkit-scrollbar-track-piece:vertical:hover{background:#DFE7EF;}
    *::-webkit-scrollbar-track-piece:horizontal{background-color:transparent;}
    *::-webkit-scrollbar-thumb:vertical{height:100px;background:rgba(110,146,182,.5);}
    *::-webkit-scrollbar-thumb:vertical:hover{background:rgba(110,146,182,.4);}
    *::-webkit-scrollbar-thumb:horizontal{width:80px;height:10px;background-color:#ccc;}
  7. 目录截图

  8. 生成r.js打包目录

    //切换到根目录
    
    执行:node r.js -o build.js
  9. 效果:
    新目录one就是一个新的站点,那么流程到此结束;可看到与未打包时一样的结果;但是,相对而言请求被打包了,文件被打包了,那么还有更多 的细节,请查看官方文档
时间: 2024-11-05 20:35:52

requirejs 使用实例r.js打包的相关文章

用 requirejs 的 R.js 打包css + js

最近用requirejs做了一个项目,实现了模块化的开发方式,通过声明将依赖引入,有效的管理了各个模块之间的依赖关系,开发也有条不紊的进行,但是最近要上线,就面临着一个打包的问题,因为js模块化,导致js文件很多,所以要将其压缩成一个文件. 一.压缩js 1.首先你要先有nodejs环境,没有可以去装一个 2.你得下载R.js 3.新建一个build.js ({ baseUrl: "../src/main/webapp/static/js", name: "app"

使用r.js打包js文件

之前的文章里有介绍requirejs的基本使用方法,但是直接使用requirejs会暴露出一个问题,就是当模块过多的时候,requirejs就会引入许多js文件,大大的增加了请求数,那么有的朋友就要说了,我们自己压缩那些模块文件不就行了么,其实仔细想想这样到底行不行,答案是行!但是很麻烦: 1. 首先一般我们写模块时不会去定义模块名字,因为模块名字默认就是js文件名字,如果自己手动去写模块名,就增加了额外的工作量. 2. 加载顺序的问题,自己手动压缩,就要严格把控好模块的先后顺序(特别是有jqu

requirejs实验002. r.js合并文件. 初体验.

requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrburke/r.js/blob/master/build/example.build.js 这里罗列了所有的优化参数. 我是在win7上使用r.js的. 安装使用的是npm ->  npm install -g requirejs  安装在全局,更合适,方便在任何地方使用. windows上使用r.js

转载 r.js打包经验

例子1 先是HTML页面 <!DOCTYPE html> <html>     <head>         <title>My App</title>         <link rel="stylesheet" type="text/css" href="css/main.css">         <script data-main="scripts/m

r.js 打包压缩文件(依赖require)

r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求. 要使用r.js需下载r.js文件( 点我下载 ),将其放到你的项目根目录:还需要安装nodeJS(点我下载),以便通过命令行来执行r.js功能. 下面是我项目 幸福来敲门的目录结构.从index.html结构的data-mian可以看出模块的入口是app.js. app.js里面是这样一小段代码: 注释

requirejs r.js 打包报错paths fallback not supported in optimizer please provide a build config path override for jquery

错误原因: 改为:

requireJS的优化工具 ---- r.js

requireJS是javascript的模块加载器,是基于AMD规范实现的. r.js是其提供的对模块进行打包和构建的一个工具 下载 r.js 创建r.js 的配置文件 build.js build.js ({ appDir: './', //项目根目录 out: 'main-build.js', //输出文件名 dir: './outdir', //输出目录,全部文件打包后要放入的文件夹(如果没有会自动新建的) /* 有了dir,就不能使用out配置项了,你在编译时它有非常明确的提示 */

r.js结合gulp等于webpack(angular为例)

本人大学时玩dojo,开始了AMD模块化的不归路,工作后一直使用requirejs,感觉非常好.但是,近来随着react的火热,webpack成为了天下无敌的模块化工具,能做模块化,合并压缩,监视等,当我看见webpack甚至还能做反向代理的时候,我整个人都不好了.我已经打算从requirejs转向webpack了,在重构以前老代码的时候,我想记录下历史.使用r.js结合gulp同样可以实现webpack的绝大部分功能. 例子 源代码地址:https://github.com/lewis617/

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