Giter VIP home page Giter VIP logo

Comments (35)

vaseala avatar vaseala commented on May 30, 2024

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

from fis3.

vaseala avatar vaseala commented on May 30, 2024

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

from fis3.

oxUnd avatar oxUnd commented on May 30, 2024
fis.hook('module');

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

from fis3.

vaseala avatar vaseala commented on May 30, 2024

嗯 好的

from fis3.

2betop avatar 2betop commented on May 30, 2024

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

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

from fis3.

vaseala avatar vaseala commented on May 30, 2024

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

from fis3.

vaseala avatar vaseala commented on May 30, 2024

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

from fis3.

vaseala avatar vaseala commented on May 30, 2024

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

from fis3.

2betop avatar 2betop commented on May 30, 2024

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

from fis3.

vaseala avatar vaseala commented on May 30, 2024

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

from fis3.

vaseala avatar vaseala commented on May 30, 2024

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

from fis3.

vaseala avatar vaseala commented on May 30, 2024

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

from fis3.

2betop avatar 2betop commented on May 30, 2024

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

from fis3.

vaseala avatar vaseala commented on May 30, 2024

嗯 好 是个思路 3Q!

from fis3.

vaseala avatar vaseala commented on May 30, 2024

重写了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团队看看上述代码有没有问题

from fis3.

2betop avatar 2betop commented on May 30, 2024

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

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

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

from fis3.

vaseala avatar vaseala commented on May 30, 2024

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

from fis3.

oxUnd avatar oxUnd commented on May 30, 2024

你这不就是 amd 的吗?

在 2015年7月7日,上午7:02,atmjs [email protected] 写道:

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


Reply to this email directly or view it on GitHub.

from fis3.

vaseala avatar vaseala commented on May 30, 2024

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

from fis3.

oxUnd avatar oxUnd commented on May 30, 2024

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

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

from fis3.

vaseala avatar vaseala commented on May 30, 2024

// 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');

});

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

from fis3.

2betop avatar 2betop commented on May 30, 2024

你这用的是 sea.js ?

from fis3.

2betop avatar 2betop commented on May 30, 2024

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

from fis3.

vaseala avatar vaseala commented on May 30, 2024

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

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"
        ]
    }
}

from fis3.

vaseala avatar vaseala commented on May 30, 2024

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

from fis3.

oxUnd avatar oxUnd commented on May 30, 2024

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

from fis3.

2betop avatar 2betop commented on May 30, 2024

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

QQ:771245261. mail: [email protected]

from fis3.

vaseala avatar vaseala commented on May 30, 2024

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

from fis3.

oxUnd avatar oxUnd commented on May 30, 2024

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

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

from fis3.

2betop avatar 2betop commented on May 30, 2024

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

from fis3.

oxUnd avatar oxUnd commented on May 30, 2024

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

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

比如

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

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

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

from fis3.

2betop avatar 2betop commented on May 30, 2024

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

from fis3.

oxUnd avatar oxUnd commented on May 30, 2024

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

from fis3.

oxUnd avatar oxUnd commented on May 30, 2024

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

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

from fis3.

vaseala avatar vaseala commented on May 30, 2024

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

from fis3.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.