requirejs

『壹』 关于requirejs文件加载报错的问题。

确实如此哦，感觉你已经为自己解答了。

『贰』 如何在node.js中使用requirejs

安装requirejs

requirejs官方提供了一个可用于node的适配器 r.js
。有两种方法可以在项目里面加入此库。

1. npm

在具体项目目录下使用如下命令来引入requirejs:
npm install requirejs

windows环境下安装需要注意不要加上 -g
全局开关，否则不能正常安装。

安装完成后，可使用 require('requirejs')
来加载requirejs。

2. 下载r.js

如果不想使用npm，也可以直接下载r.js，并把它放到项目中达到同样的目的。

点击下载。

在项目中通过 require('/path/to/r.js')
来加载requirejs。

配置

配置requirejs
var requirejs=require('requirejs');

requirejs.config({
//把node自身的require方法传递给requirejs
nodeRequire: require
});

requirejs(["foo","bar"],function(foo,bar){});

在需要使用requirejs的地方可以用上面的代码来配置requirejs。首先加载requirejs模块，命名为 requirejs
（可以为其他命名）。然后对 requirejs
进行配置。配置的方法和参数可以参照浏览器版本的requirejs的 配置说明
。不过有一点不同，如代码所示，我们需要把node的 require
方法引进来。最后一行是简单地加载模块的示例，requirejs会尝试把 foo
和 bar
两个模块当成AMD模块来加载，如果失败，则会调用node的 requie
方法来把它们当作commonjs模块加载。为了实现这样的适应性，所以我们需要配置node的 require
方法。但实际测试并不尽如人意，保险起见，还是对AMD模块使用 requirejs
加载，对commonjs模块使用 require
加载。

构造AMD格式的node模块

在node中定义的模块是commonjs模块，如果想要构造AMD模块，我们需要 amdefine
这个包。

安装amdefine

同样，可以使用npm进行安装，在项目目录下执行：

npm install amdefine

在windows下也存在无法全局安装的问题，需要对项目单独安装。

定义define方法

if(typeof define !== 'function'){
var define=require('amdefine')(mole);
}

amdefine提供了包装AMD模块的 define
方法。不过上面代码中对于node中是否包含define方法的检测判断请保留，最好原封不动地将这几行拷贝到自己的项目中。这样，我们就可以像使用前端requirejs一样，定义和使用AMD模块。

将node自己的common模块转换为AMD模块

原本想通过引用`amdefine`包来实现node端AMD模块的定义，不过requirejs本身定义了`define`方法，不必额外引入其他包。

『叁』 使用requirejs模块化引入 js，不知道为什么还是报错，就如图所示

我直接使用esl没有问题的。。。

require.config({
paths:{
'echarts':'./echarts2/echarts-original',
'echarts/chart/bar':'./echarts2/echarts-original',
'echarts/chart/line':'./echarts2/echarts-original',
'echarts/chart/pie':'./echarts2/echarts-original',
'echarts/theme':'./echarts2/theme'
}
});

require([
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/pie'
],function(ec){
EChart._ec=ec;
if(callback){
callback.call(ec,ec);
}
});

还有，你那报什么错了 ？

『肆』 Mismatched anonymous define() mole:这个怎么解决requirejs中的

引用的requirejs跟引用的其他js引起了冲突,其他js中也定义的define这个变量.
比如你引用了这样的js:

<script src="services/require.js"></script>

<script src="services/Utility.js"></script>

出现了Mismatched anonymous define() mole这种错误.那么意味着Utility.js中也定义了define这样的变量.所以在使用中你只引用require.js

然后 require(['Utility'],function(){}) 使用Utility.js 就不会出现错误了.

该错误归根结底就是 define已经被定义了.或者在之后的js中被重写了.

『伍』 requirejs 怎么获取window这个对象

requirejs 是一个根据需要加载javascript模块的框架。但是有时候在一个项目中，我们可能需要根据不同的平台或者浏览器加载不同的模块，下面我们通过举一个例子介绍一个简单的方法解决这些问题。

工具/原料
假如我们现在有以下需要

1、如果浏览器原生支持JSON对象，则不加载JSON2模块，否则，加载JSON2
2、我们现在有2个文件，一个用来操作localStorage，命名为StorageModel.js，一个用来操作cookie，命名为CookieModel.js；假如浏览器支持localStorage，则我们加载StorageModel.js而不加载CookieModel.js，否则加载CookieModel.js而不加载StorageModel.js
下面我们来解决这个问题
方法/步骤
1
判断是否支持
//-------------下面是代码-----------
var SUPPORT_JSON=(typeof(JSON)!=='undefined');//如果支持则为true，不支持则false
var SUPPORT_STROAGE=(typeof(Storage)!=='undefined')
//----------------------------------
2
requirejs配置

//-------------------------
require.config({
paths:{
/ 当SUPPORT_STORAGE 的值为true时，表达式的值为'/StorageModel'；为false时，表达式的值为'/CoookieModel'；这样就达到了根据情况加载其中一个模块的效果
'model':(SUPPORT_STORAGE && '/StorageModel')||'/CookieModel',/
'json':'/json2'
}
});
//-------------------------
3
载入代码

//--------------------------------
//下面 (SUPPORT_JSON &&'model')||'json' 当SUPPORT_JSON 的为true时，则表达式的值为'model'，而前面已经载入'model'所以会被忽略，当SUPPORT_JSON为false时，则表达式的值为'json'，那么就会载入json2模块
require('model',(SUPPORT_JSON &&'model')||'json'],
function(){
//......
});
//--------------------------------

『陆』 如何使用requirejs加载html

在前端模块化的时候，不仅仅是js需要进行模块化管理，html有时候也需要模块化管理。这里就介绍下如何通过requirejs，实现html代码的模块化开发。
如何使用requirejs加载html
Reuqirejs有一个text的插件，它可以读取指定文件的内容，读取到的内容就是文本。
如何下载text插件
第一种方法，可以通过npm下载：
npm install requirejs/text

第二种方法，也可以直接去官方github上面直接下载。
直接拷贝内容到text.js中即可。
如何安装text插件
在requirejs的main.js中配置text插件的依赖即可，跟jquery差不多，只要保证能通过正常的加载方式加载到它就行。
requirejs.config({
baseUrl: './',
paths: {
'text':path+'/require/text',
...
},
shim: {
...
}
});

也可以直接放在baseUrl里面。
如何使用text
在目标模块中，按照下面的语法即可：
define(function(require){
var html = require("text!html/test.html");
console.log(html);
});

或者
define(["text!html/test.html"],function(html){
console.log(html);
});

如何进行html的模块化开发？
看过上面你已经会使用text了，但是仍然不知道怎么组织前端代码。
举个栗子：
博客园的网站页面会根据上方的导航跳转到不同的页面。如果是在单页面中，很容易想到原始的做法是，导航的按钮对应不同的div，点击那个按钮，就显示与之对应的div；其他的div则隐藏掉。
那么，前端的代码可能会这样：
<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>

<div style="display:block">按钮1对应的页面</div>
<div style="display:none">按钮2对应的页面</div>
<div style="display:none">按钮3对应的页面</div>

</body>
</html>

这样的代码会很杂乱...而且前端Html会很长...不利于维护。
那么有了reuqirejs的text插件以后，就可以这样了：
<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>

<div id="target"></div>
</body>
</html>

然后在对应的模块中：
$('#target').html(require("text!目标按钮对应的页面.html"));

这样就随性多了吧！前端代码也可以跟着模块一起有效的管理了！
不过需要注意的是：这种方式会导致Jquery绑定的事件失效——所以一定要在html()方法后面，重新绑定下事件。

『柒』 在这一个普通的js文件里怎么调用requireJS的define模块里的函数

RequireJS中定义一个模块，总的来说有2种方式：简单键值对和回函数依赖式。
1.简单键值对：一个答模块仅含有值对，没有任何依赖
define({
color: "black",
size: 1,
method1: function() {},
method2: function() {}
});
这种写法虽然简单，但是有很大的局限性，仅仅是定义了该模块的返回值，不能做一些额外的初始化工作。
通过下面下面这种方式来定义模块，灵活性更高，我们可以在函数体内写一些模块初始化的代码
define(function () {

//Do initial work here

return {
method1: function() {},
method2: function() {}
};
});
2.函数依赖式：则第一个参数是依赖的名称数组；第二个参数是回调函数。
在模块的所有依赖加载完毕后，回调函数会被调用来定义该模块。
define(["mole1"], function(moudle1) {

function calc()
{
return moudle1.val;
}

return {"get":calc};
}
);

『捌』 使用requirejs时怎么解决文件版号和增量更新的问题

看你前后端用什么技术了，我知道的大概有3种情况。 在这三种情况之前，首先要说的是requirejs对依赖增加hash的方式是通过参数urlArgs: 'ver='v{version}在require.config统一增加的，就我所知似乎不能单独对每个模块设置 （但可能是我错了），即每次都得批量更新版本号。
1.如果你采用过requirejs，且前后端分离，前端采用yeoman构建，那么只要找到相应的质量高的requirejs的generator，无论是gulp还是grunt， 其yeoman的generator应该已经处理好文件缓存增量更新的问题了。 2.假使前后端分离，前端由gulp/grunt集成，文件版本号增量更新，用下面几个插件就能处理的比较完美： gulp-rev gulp-rev-all gulp-useref (grunt也能找到类似的) 其中gulp-rev，计算文件hash值，gulp-useref对html内特定注解标签下的内容合并重写，gulp-rev-all会考虑css引用图片hash值改变的情况从而更新css文件hash。 等等总之只要去找总能通过gulp/grunt解决这个问题。 3.如果你使用rails(ruby)等前端友好框架，可能会有流行的解决方案，如果不幸用了老旧前端不友好的框架SpringMVC(java)，用gulp对jsp重编译比较蛋疼。。我不知道有没有相应的插件，如果没有你只能在后台维持这个版本号变量，对页面所有静态资源添加这个后缀，类似下面的代码：
var require = {
baseUrl: '/Content',
urlArgs: 'ver='+${static_resource_version},
paths: {...},
deps: ['scripts/home/about']
}
<script src="/Content/bower_components/requirejs/require.js?ver=${static_resource_version}" async></script>

其中path之内的所有脚本，以及deps内的入口脚本，都会被追加urlArgs，只是这样还无法达到最理想增量更新就是了。。。 此外，对于文件版本号的后缀args我也推荐使用git commit的hash值。

『玖』 requirejs入口文件设置的问题

由于 data-main 设置的复制是 js/main ， requirejs 按理说应该加载 该 html 所在目录下的 js 目录下的 main.js 才对。
而截图里 却没有 js/ 这层目录。奇怪！

你是在本地启动的 http 服务，然后绑定 hosts 来调试吗？

『拾』 reactjs怎么和requirejs结合使用

1.采用 webpack 的打包方式，来就不需要 require.js 了，文源件依赖关系交给打包工具去处理
2.原文件中不要采用 jsx 的方式， 使用如 React.createElement 这样的
3.react 相关文件抽取为单独文件，require 引用打包后的文件