npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fis-postprocessor-amd

v0.2.18

Published

fis-postprocessor-amd ===========================

Downloads

36

Readme

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 请查看上面的说明

注意