RequireJs 基础知识

[eyasliu]

官方网站：http://requirejs.org/

用途：

• 实现js文件的异步加载
• 管理模块之间的依赖性，便于代码的编写和维护

入口文件

在引入requirejs文件的script标签中使用data-main定义入口文件，入口文件得js后缀可省略

<script src="js/require.js" data-main="js/main"></script>

requirejs 配置

在入口文件的头部，或者在引入requirejs前，定义requirejs的配置

require.config({

  baseUrl: '/',   // 基础路径
  path:{    // path 定义文件路径，相当于给路径取个别名
    backbone: 'js/lib/backbone.js',
    underscore: 'js/lib/underscore.js',
    jquery: 'js/lib/jquery.js'
  },
  shim:{  // 对于非AMD规范的库，声明依赖，暴露的变量名
    backbone: {
      deps: ['jquery', 'underscore'],
      export: 'Backbone'
    }
  }
})

导入模块

在入口文件中导入依赖包

require(['underscore', 'jquery'], function(_, $){
  // init project
})

AMD模块的规范

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。

定义模块

使用define函数定义一个模块，模块的主体部分是一个匿名函数，函数的返回值是模块暴露的方法与变量

无依赖

具体来说，就是模块必须采用特定的define()函数来定义。 如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

define(function(){
  return {}
})

有依赖

如果模块有依赖，第一个参数为依赖数组，第二参数模块主体

define(['underscore', 'jquery'], function(_, $){
  return {}
})

加载非规范模块

在配置文件的shim中，定义非AMD规范的库，引入的时候就可以直接按照规范去引入非规范的模块

插件

插件列表：https://github.com/requirejs/requirejs/wiki/Plugins

插件的使用见插件文档，通常来说是使用感叹号分隔 !

define(['babel!es6-module'], function(module){
  // code
})