请教个模块化的问题

[vaseala]

//test.js

//release前
var $ = require('$');
//...

//release后
define('test', ['$'], function(require, exports, module){ 
    var $ = require('$');
});

我想实现这样的构建效果, 之前是修改的jswrapper,现在应该怎么设置？

[vaseala]

因为模块加载与解析器是我自己写的,需要这样的模块结构。

[vaseala]

只配置了
fis.hook('module');
不知道另外还需要咋配置

[oxUnd]

fis.hook('module');

只是支持mod.js的和amd的，如果你自己的，那么你可以定制一下咯。写个能解析你 js 中依赖函数的函数即可，今天出篇类似的文档

[vaseala]

嗯 好的

[2betop]

想要使用 require($), 那么得这么配置。

fis.hook('module', {
   paths: {
       '$' => '你的 jquery 相对于项目的路径'
   }
});

[vaseala]

我是用php根据多个manifest.json分析的依赖, require('$')的时候$其实已经define过了

[vaseala]

解决了！ fis团队成员辛苦了！会一直支持fis！

[vaseala]

有个问题，在js中声明对js的依赖，为啥还要在注释中用@require去声明，直接分析文件不就可以了么？
https://github.com/seajs/seajs/blob/master/src/util-deps.js

[2betop]

你说的功能是支持的，需要使用 fis3-hook-module 插件。

[vaseala]

嗯 hook之后会增加个define外壳,我不想要这个外壳

[vaseala]

这个外壳是不是可以设置不生成？

[vaseala]

如果不能设置， 我是应该自己写个类似hook-module的 还是写个类似jswrapper的模块呢？

[2betop]

那你对目标文件设置 isMod: false. 然后不会包裹了。

[vaseala]

嗯 好 是个思路 3Q!

[vaseala]

重写了fis3-hook-module模块,终于实现了开头要实现的效果

var commonJs = require('./lib/commonJs.js');

module.exports = function init(fis, opts) {
    fis.on('compile:postprocessor', function (file) {
        if (file.isJsLike && !file.isPartial || !file.isMod) {
            var content = file.getContent();
            var deps = JSON.stringify(file.requires) + ',';
            content = 'define(\'' + (file.moduleId || file.id) + '\',' + deps + ' function(require, exports, module) {\n\n' + content + '\n\n});\n';
            file.setContent(content);
        }
    });

    fis.on('standard:js', function (info) {
        var file = info.file;
        if (file.isMod) {
            commonJs(info, opts);
        }
    });
};

module.exports.defaultOptions = {};

望fis3团队看看上述代码有没有问题

[2betop]

看不懂你的意图，你是想要什么 case 下需要 amd 包裹？

目前就上面的代码得出的结论是：

1. 不是内嵌的 js
2. 或者 不是模块化的 js

[vaseala]

我自定义了define函数，需要 define(id,dependsIds,functioo(){})这样的包裹，其中dependsId为解析该文件内的require语句获取的

[oxUnd]

你这不就是 amd 的吗？

在 2015年7月7日，上午7:02，atmjs notifications@github.com 写道：

我自定义了define函数，需要 define(id,dependsIds,functioo(){})这样的包裹，其中dependsId为解析该文件内的require语句获取的

—
Reply to this email directly or view it on GitHub.

[vaseala]

但是我直接设置成amd,构建后没有dependIds

[oxUnd]

我记得是默认依赖前置的，你看文档上不是写得蛮清楚的吗？

fis.hook('module', {

  // 可以通过设置此值来给 js 文件进行包裹。
  // 
  // 可选值：
  // - `amd` 即 amd 包裹
  // - `closure` 即闭包包裹。
  // - 留空时不进行处理，isMod 为 true 的文件除外。isMod 为 true 的文件，会进行 amd 方式包裹。
  wrap: '',

  // 分为两种：
  //
  // `commonJs` 选用此方案，性能最好，规则更简单
  // `amd` 需要词法分析，时间略长。
  //  当设置为 auto 的时候，程序自动判断。
  mode: 'auto',

  // 配置 baseUrl, 配置，页面中的 require 路径都是基于此路径查找的。
  // https://github.com/amdjs/amdjs-api/blob/master/CommonConfig.md#baseurl-
  // baseUrl: '.',

  // 可以给项目中的路径或者文件建立别名。
  // 
  // {
  //   libs: '/static/libs',
  //   jquery: '/static/libs/jquery'
  // }
  // 
  // 那么:
  // 
  // require('lib/alert'); 就等价于 require('/static/libs/alert');
  // requrire('jquery');  等价于： require('/static/libs/jquery');

  // 更多信息请参考。https://github.com/amdjs/amdjs-api/blob/master/CommonConfig.md#paths-
  // paths: {},

  // 后续补充
  // 届时，请参考。https://github.com/amdjs/amdjs-api/blob/master/CommonConfig.md#packages-
  // packages: [],

  // 是否依赖前置
  // 即 是否将 factory 中的 require 对象，前置放在 define 的第二个参数中。
  // 对于 amd loader 来说可以免去解析 factory 的操作。推荐给用  amd loader。
  // !!! 用  mod.js 作为 loader 时，勿用!!!!
  forwardDeclaration: false,

  // 当 mod 为 amd 时，以下配置才有效。

  // 届时，请参考。https://github.com/amdjs/amdjs-api/blob/master/CommonConfig.md#shim-
  // shim: null,

  // 是否将全局的 require(['jquery']) 异步用法当成同步？
  // 当成同步，js 加载不再走 loader 而是，直接页面源码中输出 <script> 标签到页面，用 <script> 来加载。
  globalAsyncAsSync: false,

});

• forwardDeclaration: false

[vaseala]

// release前account.js代码,即程序员编写的代码

/**
 * @require account.css
 */

var $ = require('$');
var reg = require('./reg/reg.js');
var login = require('./login/login.js');

我想要的release后的效果是

define('work/account:1.0.0',["work/account:1.0.0.css","$","work/account:1.0.0/reg","work/account:1.0.0/login"], function(require, exports, module) {

/**
 * @require work/account:1.0.0.css
 */

var $ = require('$');
var reg = require('work/account:1.0.0/reg');
var login = require('work/account:1.0.0/login');

});

配置为

fis.hook('module', {
    type: 'amd',
    forwardDeclaration: true
});

时，release后的代码是

define('work/account:1.0.0',['require','exports','module'],  function(require, exports, module) {

/**
 * @require work/account:1.0.0.css
 */

var $ = require('$');
var reg = require('work/account:1.0.0/reg');
var login = require('work/account:1.0.0/login');

});

这并不是我想要的构建效果,不知道表达清楚没有

[2betop]

你这用的是 sea.js ？

[2betop]

现在哪个 amd loader 能够直接 load css 资源，而不借助 amd plugin?

[vaseala]

嗯 我也是刚注意到这一点 ，我纠正下：
我想要的是

define('work/account:1.0.0',["$","work/account:1.0.0/reg","work/account:1.0.0/login"], function(require, exports, module) {

/**
 * @require work/account:1.0.0.css
 */

var $ = require('$');
var reg = require('work/account:1.0.0/reg');
var login = require('work/account:1.0.0/login');

});

但是希望在manifest.json里面是

{
    "work/account:1.0.0": {
        "uri": "/work/account/1.0.0/account.js",
        "type": "js",
        "deps": [
            "work/account:1.0.0.css",
            "$",
            "work/account:1.0.0/reg",
            "work/account:1.0.0/login"
        ]
    }
}

[vaseala]

现在就差这个地方不知道怎么实现 ， 其他的都能兼容以前的代码了， 求帮助！

[oxUnd]

@ATMjs 那你以前是如何解决的？

[2betop]

@ATMjs 这样吧，你看用什么方式吧你的项目代码发给我。让我看看！

QQ:771245261. mail: 2betop.cn@gmail.com

[vaseala]

以前修改的那个jswrapper ， 里面用的 file.requires

[oxUnd]

这个配置跟 FIS 是一样的呀，不清楚你问题在什么地方；

var rev = '0.0.1';
fis.match(/widget\/(.*)\.js/', {
  id: 'widget/$1:' + rev,
  release: '/widget/$1/' + rev + '/$1.js'
});

[2betop]

他这应该是想定制 js 包裹, 只是 fis3 里面的方式变了，捆绑在了 hook-module 里面。

[oxUnd]

@ATMjs 你现在依然也可以用 jswrapper 去实现你的需求啊，没必要非要用 module 来解决啊，module 没内置你也是明白为什么，我们不想在核心去依赖一个什么什么规范。所以对 require 也不会去收集啊，如果你想收集，可以在 preprocessor 阶段去做收集就可以了。

虽然大家都在用 require 这个字面量来表述 依赖 这个信息，但有些库它可能就不是这个样子的啊，比如某一天我自己撸了一个库。我很蛋逼，我想表述依赖的函数应该叫 Q。

比如

Q('./a.js');
Q('./b.js');

难道这样不行吗？那如果对 Q 去做收集我写一个插件就可以搞定了。。

综述，这些都不是个事儿，就看你对 JS 模块化到底有多少了解。

[2betop]

是的， fis.hook('module', {wrap: false}) 是可以关闭 hook-module 里面的这一动作的。

[oxUnd]

@ATMjs 就如同 @2betop 的说法，你可以把 module 的 wrap 关掉，自己再配置个 jswrapper （就你以前用的那个）插件就可以了，这个问题就解决了。当然你也可以详细看一下我的 Q 库的那段文字。

[oxUnd]

不过还是非常感谢你 @ATMjs 的尝试，我已经把这块的支持信息写入文档

https://github.com/fex-team/fis3/blob/dev/doc/docs/fis2-to-fis3.md#不再默认解析-js-中的-require-函数添加依赖

[vaseala]

嗯 非常感谢2betop和xiangshouding两位！2betop已帮我解决！