fis3 commonJs 中的 moduleId

作者:feix760

首先看一个有趣的问题

// fis-conf.js
fis.hook('commonjs')
    .match('/modules/common/utils', {
        isMod: true,
        moduleId: 'utils'  // 为utils设置一个moduleId,希望以后能直接require('utils')
    })
    .match('::package', {
        postpackager: [
            fis.plugin('loader', {
                resourceType: 'commonJs'
            })
        ]
    })
<!-- main.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- etc.. --->
    <script>
        require('utils')
    </script>
</body>
</html>

想象中理想的输出

<!-- main.html -->
<html>
    <script src="/modules/common/utils.js"></script>
</html>
// /modules/common/utils.js
define('utils', function() {
    // ...
})

实际结果

<!-- main.html -->
<html lang="en">
    <!-- 不会有utils.js的引用,也就意味着fis并不能发现用moduleId直接引用的依赖 -->
    <!-- script src="/modules/common/utils.js"></script-->
</html>
// /modules/common/utils.js
define('utils', function() {
    // ...
})

解读

  • 实际上moduleId只决定本身的define语句。
  • 要让fis识别出类似moduleId的短引用,可以配置commonJs的paths/packages映射。
fis.hook('commonjs', {
    paths: {
        utils: '/modules/common/utils.js'
    }
})
  • 寻找文件依赖是在lookup阶段完成,lookup阶段并不是一个包含所有文件的阶段,而是处理单个文件的阶段,因此没有所有文件moduleId的映射表。lookup函数需要返回两个信息: moduleId和fileId, moduleId用于替换require()语句( 注②),fileId加入依赖中,所以lookup返回的moduleId需和相关文件的moduleId一致,否则会出现以下错误:
define('lib/A.js', function() {
})
<!-- main.html -->
<html>
    <script>
        require('modules/lib/A.js');
    </script>
</html>

注② lookup返回的moduleId

var A = require('lib/A.js')

编译成:

define('XX', function() {
    var A = require('modules/lib/A.js')
})

原文链接:http://ivweb.io/topic/565c548a3ad940357eb99874

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小灰灰

cocos2dx-v3.5 2048(三):菜单实现

前言 ---- 本节主要包括菜单栏的绘制以及添加触发事件,菜单栏又分为两级,如下面两张图,当点击set时,出现模式选择的菜单项。这里主要利用到了 MenuIt...

1929
来自专栏JetpropelledSnake

Django学习笔记之Django Form表单

1064
来自专栏LIN_ZONE

markdown 基本语法(转载)

最近感觉一直使用富文本编辑器写东西,感觉有点烦,所以就试着学习了一下简单的markdown编辑器的使用

732
来自专栏Golang语言社区

go 对windows api的调用

package main import ( "syscall" ) func abort(funcname string, err string) {...

3316
来自专栏安恒网络空间安全讲武堂

从零基础到成功解题之0ctf-ezdoor

1254
来自专栏AI

在Atom中设置Python开发环境

当然,这里有很多很棒的文本编辑器。Sublime Text,Brackets,Atom。我一直都是Atom的粉丝,因为它是完全免费的,它有很多可用的包和主题,使...

3537
来自专栏一“技”之长

Java开发GUI之BorderLayout边界布局

    前面博客中所提及的例子都是针对单独的视图组件,将组件组合并布局在合适的位置才能算是完整的界面。Java中的布局采用布局管理器模式进行,提供了跨平台性,B...

632
来自专栏月色的自留地

macOS webview编程

1574
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:在对Wijmo GridView进行排序或者过滤时保留选择

许多客户面临这样的场景,他们希望在应用了排序或者过滤之后仍然将最终用户的行选状态保留。通常情况下,当我们在选择了任何行之后应用排序或者过滤会导致回传之后选择状态...

1759
来自专栏debugeeker的专栏

xss渗透试验(3)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

341

扫码关注云+社区