seajs-wrap 中文文档

[afc163]

CommonJS 包装插件

在新的 spm3 中，编码书写规范从 CMD 规范全面转向了 CommonJS 。这样可能会碰到一个问题，在线下调试环境中可以直接运行的 CMD 模块，现在由于去掉了 define 块包装，无法在 Sea.js 环境中直接跑起来。

我们推荐使用 spm doc watch 并打开 http://127.0.0.1:8000 进行调试，这个工具会在本地启动一个静态服务，监听加载的静态文件并动态包装 define 块。

但是这个工具并不能满足所有情况，所以就有了这个插件，可以帮助你对 CommonJS 模块进行调试。首先需要引入 Sea.js(2.1及以上版本) 和插件：

<script src="path/to/sea.js"></script>
<script src="path/to/seajs-wrap.js"></script>

加载 CommonJS 模块

用 seajs.use 或 require 来调用 CommonJS 模块。

seajs.use('common', function(Common) {
  // Common 可用了
});

// common.js 是一个 CommonJS 模块，无须手写 define 块
var a = 1;
var b = 2;

module.exports = function () {
  return a + b;
};

seajs-wrap 的实现原理是通过 XHR 对象去加载模块文件，拿到文件内容后动态包装上 define(function(require, exports, module) {}); 块后，再进行执行。拿到文件内容后会进行简单的判断，如果模块已经是 CMD 模块，则不进行包装。

对于不希望进行包装的文件，可以使用 ?nowrap 来指定此模块无须进行包装。

// no-need-to-wrap.js
// 执行前不会进行包装
seajs.use('no-need-to-wrap.js?nowrap', function() {
});

注意事项

1. seajs-wrap 会通过 XHR 来加载模块（这样才能任意修改源码后执行），所以受到同源策略限制，请务必在线下调试环境来使用这个插件。
2. seajs-wrap 只针对 JS 模块进行包装。

[huixisheng]

不错的解决方案。现在发现原先seajs很多的功能都是抽离成了插件。

[pengxinoo7]

将js加载进来后，用eval执行后，调试时不能看到加载了哪写文件，感觉不太方便，建议在globalEval函数中的“ })(content)”改成“})(content + "//@ sourceURL="+uri)”

[afc163]

欢迎 PR ~

[w19871029]

采用这个插件 jquery 会报错 说是

TypeError: $ is not a function

jquery 是2.1 版本

[w19871029]

难道是不支持 这种写法吗

$ = require("jquery")

seajs.config({
   base  : "./js/sea-modules",
   alias : {
    "jquery" : "jquery/2.1.0/jquery"
   } 
})
seajs.use('./js/start',function(){
})

[w19871029]

哎 原来真是这样 我把写成

var $ = require("./sea-modules/jquery/2.1.0/jquery");

就可以啦，这样打包的话 不是也把jquery 打包过去了吗 这样有问题啊 有什么好的方法解决吗

[acwong00]

引入seajs-wrap.js 文件后直接打开html文件和在127.0.0.1:8000里面打开都不能正确运行，然后把项目拷贝到xampp里面则可以正确运行，请问是什么原因？

[huixisheng]

@acwong00 直接打开肯定不行啊。你要开启一个http服务才行。例如：spm doc watch

[acwong00]

@huixisheng 嗯，我说的127.0.0.1:8000 就是在spm doc watch 开启的，但是不能运行，然后在xampp 的服务器当中才可以。

[huixisheng]

@acwong00 我试了下，可以的。你可以再试试。看看控制台有没有报错。

[rekey]

如果没有低版本浏览器限制，应该也可以通过 CORS 来处理跨域问题。