美文网首页
模块化:require.js及r.js基础

模块化:require.js及r.js基础

作者: 柯良勇 | 来源:发表于2016-05-23 22:18 被阅读78次

require js的基本配置文件格式如下:

    requirejs.config({
      baseUrl: "src/js",  
      paths: {
        'jquery': 'lib/bower_components/jquery/dist/jquery.min'
      }
    });

baseUrl作用:给后续所引用的模块自动添加一个前缀,也就是说后续所引用的模块的地址是在此url基础上加引用时的小部分路径构成的。
baseUrl的基准:以引用config的那个html文件的所在目录为基准。
paths的作用:为一些跨baseUrl目录在当前目录下路径较长的模块做路径设置,在引用有设置paths的模块时,会用baseUrl+paths作为路径去获取模块。
paths的用法:例如,大部分模块在module中,而我的jquery因为分类是库,所以放在lib下了,此时baseUrl兼顾大众需求设为'js/module',而对于jquery因为不在module下所以我在paths中单独给它设路径为'../lib/jquery'

requirejs.config({
    baseUrl:'js/module',
    paths:{
        jquery:'../lib/jquery'
    }
});

r.js 的打包配置文件格式如下:

({
    baseUrl: "./src/js",
    paths: {
        'jquery': 'lib/bower_components/jquery/dist/jquery.min'
    },
    name: "main",
    out: "dist/js/merge.js"
})

baseUrl:这个baseUrl是基础路径,它的任务是搭配paths或下方name、out的路径来找到对应的模块、解析起始点(即name)、输出位置(即out),它是以自身所在目录为基准的。
name:是解析入口,搭配上面的baseUrl拼接出路径,拼接出的路径要指向require.js的配置文件;图中的解析入口就是"./src/js/main.js",从main.js开始解析打包。

相关文章

  • 模块化:require.js及r.js基础

    require js的基本配置文件格式如下: baseUrl作用:给后续所引用的模块自动添加一个前缀,也就是说后续...

  • 模块化

    - 模块化 -AMD-CMD规范- requireJS实践- r.js打包工具使用 1、为什么要使用模块化?###...

  • JavaScript模块化-require.js,r.js和打包

    在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章...

  • 春哥教你前端模块化

    前端模块化 (Require.js) 为什么要用 前端模块化 早期,所有Javascript代码都写在一个文件里面...

  • 学习require.js(转)

    前言 提到require.js大多数人会说提到模块化开发,AMD等等,其实require.js并没有这么多复杂的概...

  • AMD/RequireJS 使用入门

    参考资料 RequireJS 中文网Javascript模块化编程(三):require.js的用法——阮一峰 前...

  • JavaScript模块化编程

    JavaScript模块化编程-require.js 随着网页越来越复杂、代码量越来越巨大,网页已经趋近于桌面应用...

  • require.js入门

    require.js (模块化开发的框架/插件/库/引擎) 干嘛的: 代码管理 为什么用: 代码重复,全局变量污...

  • require.js使用方法小结

    jacascript模块化几乎被看做是前端工程师必备技能,本人最近事务缠身,学习require.js的事件被拖了好...

  • 白话 AMD原理 异步加载模块

    AMD是什么,require.js又是什么? AMD: 在前端,它是一种当前开发者能使用的模块化Javascrip...

网友评论

      本文标题:模块化:require.js及r.js基础

      本文链接:https://www.haomeiwen.com/subject/fwcarttx.html