解决requirejs 加入后程序报错问题

在使用requirejs管理模块加载的过程中，常常会遇到一些报错，本文就针对这些问题进行解决。

一、加载文件路径问题

使用requirejs时，定义模块和加载模块文件的路径至关重要。如果路径设置不正确，就会出现加载失败，导致程序报错。

// 错误示范
require.config({
  paths: {
    jquery: 'libs/jquery.min.js' // 文件路径不正确，会导致加载失败
  }
});

// 正确示范
require.config({
  baseUrl: '../', // 公共路径
  paths: {
    jquery: 'libs/jquery.min' // 文件路径正确，不需要加后缀.js
  }
});

注意：公共路径baseUrl如果在requirejs.config中定义了，后面的路径就不需要写全路径了，只需要写相对路径就可以了。

二、依赖关系问题

在使用requirejs的过程中，如果模块之间存在依赖关系，就需要在define中声明依赖模块以及对应的回调函数。如果依赖关系声明不正确，就会导致程序报错。

// 错误示范
define(['jquery.min'], function($) { // 依赖关系声明错误，没有写全路径，会导致加载失败
  ...
});

// 正确示范
define(['libs/jquery.min'], function($) { // 依赖关系声明正确，写全路径
  ...
});

三、命名冲突问题

在使用requirejs时，如果模块的命名冲突，也会导致程序报错。为了避免命名冲突，我们可以使用requirejs提供的shim属性对非AMD规范的库进行装载。

// 错误示范
define(['jquery'], function($) {
  ...
  var $ = 'hello'; // 命名冲突，会导致程序报错
});

// 正确示范
requirejs.config({
  shim: {
    'underscore': {
      exports: '_'
    }
  }
});

四、模块路径大小写问题

在Windows系统中，文件路径大小写不敏感。但是，当我们在类Unix系统中时，文件路径大小写敏感。在使用requirejs加载模块时，如果模块路径大小写不正确，就会导致加载失败，程序报错。

// 错误示范
require(['libs/zepto'], function($) { // 路径大小写不正确，会导致加载失败
  ...
});

// 正确示范
require(['libs/Zepto'], function($) { // 路径大小写正确
  ...
});

五、模块文件后缀问题

在使用requirejs加载模块时，另一个常见错误是将模块文件后缀名写成了.js。实际上，在requirejs里，不需要在模块文件名后面加上.js后缀。

// 错误示范
require(['libs/jquery.js'], function($) { // 文件后缀写成了.js，会导致加载失败
  ...
});

// 正确示范
require(['libs/jquery'], function($) { // 文件后缀不需要写.js
  ...
});

六、文件编码问题

在加载模块时，如果模块文件的编码格式不正确，也会导致加载失败，程序报错。

要解决这个问题，我们需要使用UTF-8编码格式来保存文件。

小结

在使用requirejs加入后，如果程序报错，我们需要从文件路径、依赖关系、命名冲突、模块路径大小写、模块文件后缀、文件编码这几个方面进行排查。只要根据问题进行逐一排查，就能快速定位问题，解决错误。