/fis-postprocessor-amd

FIS amdjs 支持 —— 之前的逻辑貌似有些问题,修复了一下

Primary LanguageJavaScriptMIT LicenseMIT

fis-postprocessor-amd

fis amd 支持,完全满足 amdjs 规范。demo

如何使用?

npm install -g fis-postprocessor-amd

配置 fis-conf.js

fis.config.merge({
    modules: 
        postprocessor: {
            tpl: 'amd', // 如果你的模板是.tpl结尾的模板,如 Smarty、Swig 模板
            js: 'amd',
            html: 'amd' // 如果你的项目中也有一些 html 文件需要使用 AMD
        }
    }
});

说明

  1. 支持以下各种用法:

    define({
        xxx: 123
    });
    
    define(function(require, exports, module) {
        exports.xxx = 123;
    });
    
    define(function(require, exports, module) {
        module.exports = {
            xxx: 123
        }
    });
    
    define(['require', 'exports', 'module'], function(require, exports, module) {
        module.exports = {
            xxx: 123
        }
    });
    
    define(['a', 'b'], function(A, B) {
        module.exports = {
            xxx: A
        }
    });

    或者自定义 module id。不推荐

    define('base', function() {
    
    });
    
  2. 关于依赖写法(文件后缀.js 可写可不写)

    • 相对路径 ./a 或者 ../parent/a

    • 绝对路径 /module/a (基于baseUrl的绝对路径)

    • 原来的 fis id 写法 namespace:xxx/xxx.js

    • module package

      比如: zrender, echarts/chart/line

      遇到这类依赖引用,默认按一下顺序查找实现:

      • 尝试在 baseUrl 配置中找。
      • paths 中是否有定义。
      • packages 中是否有定义。

      类似于amdjs 中config。不同的是这里路径是相对于本地文件夹项目目录,而那边是相对于页面的目录。

      fis.config.merge({
      
          settings: {
              postprocessor: {
                  amd: {
                      baseUrl: './widget/lib/',
                      paths: {
      
                          // 相对于  baseUrl
                          // 如果是绝对路径则相对与 root.
                          // base 的值可以是字符串,也可以是数组,会按顺序超找。
                          base: './base/base.js'
                      },
                      packages: [
                          {
                              name: 'echarts',
                              location: 'echarts',
                              main: 'echarts'
                          },
      
                          {
                              name: 'zrender',
      
                              // 可以指定其他模块的路径。
                              location: 'common:widget/libs/zrender',
                              main: 'zrender'
                          }
                      ]
                  }
              }
          }
      });
  3. 相比原来的 jswrapper 对于 amd 文件包装更智能,提供依赖自动前置功能。

  4. 全局的异步 require(deps, callback) 中的依赖会被提前加载进来, 无需另起请求,且可以通过 fis 打包配置将依赖合并成单一文件引入,减少请求数。(当然在 module 中的异步不会把依赖提前加载进来。)

配置项说明

  1. forwardDeclaration 默认为 true 是否进行依赖前置转换。这样做可以让 amd 加载器更快解析到依赖。

    before:

    define(function(require) {
        var a = require('./a');
        var b = require('./b');
    
        return {
    
        }
    });

    after

    define('moduleId', ['require', './a', '.b'], function(require) {
        var a = require('./a');
        var b = require('./b');
    
        return {
    
        }
    });
  2. noOnymousModule 默认为 false,不允许署名模块,设置为 true 后,署名模块将被当作匿名模块处理。

  3. globalAsyncAsSync 默认为 true,因为全局 require 方法不支持同步加载,只能异步加载。

    require(['xxx'], function() {
    
    });

    此工具会把全局环境(不在 define 中)下 require([xxx], cb) 的用法认为是程序的入口,会提前把相应依赖加载进来。

    如果不想启用此用法,请关闭此配置项,或者把异步 require 放在 define 中,然后同步引用新 define 的 moudle 来实现。

  4. scriptsReg 默认只识别以下写法的 script 片段,可以通过扩展此数组来支持其他格式。

    <script type="text/javascript">js 片段</script>
    {%script%}js 片段{%/script%}
    {% script %}js 片段{% endscript %}
  5. baseUrl fis 中对 module id 的查找根目录。

  6. paths 请查看上面的说明

  7. packages 请查看上面的说明

注意