RequireJs 基础知识

@eyasliu 2016-06-12 07:19:20发表于 eyasliu/blog 前端

官方网站: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
})