fex-team/fis3-hook-commonjs

fis3 commonJs 开发支持

fis3-hook-commonjs

fis3 已经默认不自带模块化开发支持，那么如果需要采用 commonjs 规范作为模块化开发，请使用此插件。

请配合 mod.js 一起使用。

注意：需要对目标文件设置 isMod 属性，说明这些文件是模块化代码。

fis.match('/modules/**.js', {
  isMod: true
})

这样才会被自动包装成 amd，才能在浏览器里面运行（当然还得依靠 mod.js）。

另外，所有 isMod 为 true 的文件都会被包裹成 AMD, 如果不想包裹，请设置 wrap 属性为 false。

设置了 isMod 为 true 的文件可以在 js 里面直接通过 require('文件路径') 的方式来使用，支持相对路径和绝对路径。

var $ = require('/static/lib/jquery.js');

require('./index.js');

如果存在部分模块化文件不是以 commonjs 规范编写的，该插件可以通过配置文件属性 umd2commonjs 尝试兼容。

fis.match('/node_modules/echarts/**.js', {
  umd2commonjs: true
})

同时某些 js 内部有很多 require 的用法，如果希望 fis 忽略这部分依赖，可以设置 ignoreDependencies 如:

fis.match('/node_modules/echarts/**.js', {
  ignoreDependencies: true
})

自定义模块ID

插件默认使用资源的绝对路径作为模块ID，如果希望更改模块ID，需要对目标文件设置 moduleId 属性

fis.match('/modules/(**).js', {
  isMod: true,
  moduleId: '$1'
})

通过上述配置，我们可以将 /modules/A.js 的模块ID由 modules/A 改变为 A

安装

全局安装或者本地安装都可以。

npm install -g fis3-hook-commonjs

或者

npm install fis3-hook-commonjs

用法

在 fis-conf.js 中加入以下代码。

fis.hook('commonjs', {
  // 配置项
});

注意

虽然支持 paths 和 packages 设置，目的主要是为了迁移代码用的，从零开发，推荐直接使用 require('文件路径') 的方式，更简单明了。

配置项

以下所有配置都是可选配置。简单使用可以跳过。

• baseUrl 默认为 . 即项目根目录。用来配置模块查找根目录。

• paths 用来设置别名，路径基于 baseUrl 设置。

  fis.hook('commonjs', {
    paths: {
      $: '/modules/jquery/jquery-1.11.2.js'
    }
  });

• packages 用来配置包信息，方便项目中引用。

  fis.hook('commonjs', {
    packages: [
      {
        name: 'foo',
        location: './modules/foo',
        main: 'index.js'
      }
    ]
  });

  • 当 require('foo') 的时候等价于 require('/modules/foo/index.js').
  • 当 require('foo/a.js') 的时候，等价于 require('/modules/foo/a.js').

• forwardDeclaration 默认为 false, 用来设置是否开启依赖前置，根据前端加载器来定，mod.js 是不需要的。

• skipBuiltinModules 默认为 true, 只有在 forwardDeclaration 启动的时候才有效，用来设置前置依赖列表中是否跳过内置模块如： require, module, exports。

• extList 默认为 ['.js', '.coffee', '.jsx', '.es6']，当引用模块时没有指定后缀，该插件会尝试这些后缀。

• tab 默认为 2, 用来设置包裹时，内容缩进的空格数。

• ignoreDependencies 默认为 空，用来忽略掉对某些资源 require，一般用来忽略掉内部实现的 require 资源。

  fis.hook('commonjs', {
    // 忽略 angular2 的依赖。我自己负责加载需要资源。
    ignoreDependencies: [
      'angular2/**',
    ]
  });

fis3-hook-commonjs's Issues

如何支持npm模块？

如题。
现在很多js的模块都可以前后端公用，fis如何做到直接require npm模块？也需要一个个配置？

设置forwardDeclaration的bug

设置过

fis.hook('commonjs', {
                forwardDeclaration: true,
                skipBuiltinModules: true
            });

之后构建文件

构建前：

var $ = require('jquery/1.11.3:exports/jquery');
module.exports = $;

构建后：

define('jquery', [], function(require, exports, module) {

  var $ = require('jquery/1.11.3:exports/jquery');
  module.exports = $;

});

期望值：

define('jquery', ['jquery/1.11.3:exports/jquery'], function(require, exports, module) {

  var $ = require('jquery/1.11.3:exports/jquery');
  module.exports = $;

});

Paths 与 Packages

fis.hook('commonjs', {
  packages: [
    {
      name: 'vue',
      location: './bower_components/vue/dist',
      main: 'vue.js'
    },
    {
      name: 'vue-router',
      location: './bower_components/vue-router/dist',
      main: 'vue-router.js'
    }
  ]
});

foo.js 这样引用

var vue = requrie('vue')

最终替换为

//foo.js
var vue = require('bower_components/vue/dist/vue')

后面少个'.js'，怎么配置

分析require时不分析为作为成员变量的require

有些第三方库自定义了自己的 require，并作为成员对象调用，比如 select2 这类lib库。这种情况就不应该分析里面的 require 语句，否则会出现类似以下的警告：

[WARNI] Can't resolve `jquery.select2` in file [/node_modules/select2/dist/js/select2.js], did you miss `npm install jquery.select2`?

我现在修改了下正则，加了一个 (?:\.\s*require\b):

var rRequire = /"(?:[^\\"\r\n\f]|\\[\s\S])*"|'(?:[^\\'\n\r\f]|\\[\s\S])*'|(\/\/[^\r\n\f]+|\/\*[\s\S]+?(?:\*\/|$))|(?:\.\s*require\b)|\b(require\.async|require\.ensure|require)\s*\(\s*("(?:[^\\"\r\n\f]|\\[\s\S])*"|'(?:[^\\'\n\r\f]|\\[\s\S])*'|\[[\s\S]*?\])\s*/g;

从而排除对 xxx.require 的分析

packages配置location包含':'时，产生的资源id在windows上目录是'\'. 是否可以统一成'/'

应当升级一下 source-map 版本，解决 TypeError: Cannot read property 'substr' of undefined 问题

如题，当前版本可能会存在如下警告：

TypeError: Cannot read property 'substr' of undefined

dd99f1c

这个提交只是屏蔽了该出错导致的编译中断，但问题原因在 source-map

source-map 官方已通过如下提交修复该问题

https://github.com/mozilla/source-map/pull/257/commits

所以应当升级一下版本以彻底解决

对于内部实现 amd 规范的库需要添加 skipParse 属性

本插件对于普通 amd 模块和 cmd 模块表现非常优秀，但是我今天尝试处理 WebUploader的时候出现了问题

WebUploader 里实现了自己内部的模块加载器，fis 在处理的时候将最后导出的模块的那句

define('webuploader',[
    'preset/all',
    'widgets/log'
], function( preset ) {
    return preset;
});
return require('webuploader');

会被替换为

define('webuploader',[
    'preset/all',
    'widgets/log'
], function( preset ) {
    return preset;
});
return require('bower_components/fex-webuploader/dist/webuploader');

我现在尝试的解决方案是，添加一个对skipParse属性的检测，对于这种不应该由插件分析依赖的文件，就跳过分析的过程

不知道是不是有其他更好的解决方案

能否加个功能自动过滤amd模块的包装

比如有个

define(function(require) {

    'use strict';

    var zrUtil = require('zrender/core/util');

    var echartsAPIList = [
        'getDom', 'getZr', 'getWidth', 'getHeight', 'dispatchAction',
        'on', 'off', 'getDataURL', 'getConnectedDataURL'
    ];

    function ExtensionAPI(chartInstance) {
        zrUtil.each(echartsAPIList, function (name) {
            this[name] = zrUtil.bind(chartInstance[name], chartInstance);
        }, this);
    }

    return ExtensionAPI;
});

自动变成

    'use strict';

    var zrUtil = require('zrender/core/util');

    var echartsAPIList = [
        'getDom', 'getZr', 'getWidth', 'getHeight', 'dispatchAction',
        'on', 'off', 'getDataURL', 'getConnectedDataURL'
    ];

    function ExtensionAPI(chartInstance) {
        zrUtil.each(echartsAPIList, function (name) {
            this[name] = zrUtil.bind(chartInstance[name], chartInstance);
        }, this);
    }

    module.exports = ExtensionAPI;

省得从别的地方下载三方后还得自己手动修改代码

src 路径为空时，会替换为 js 文件路径

当 html 中存在 src 为空的情况（这不是一个好习惯，为空建议不写）：

page/home/index.html

<audio src=""></audio>

如果 page/home/index.js 存在，src 会被替换为：

<audio src="/pathto/page/home/index.js"></audio>

排查了下，这个地方需要判断下：

lookup.js

function findResource(name, filepath, extList) {
  // 这里需要判断下非空
  if (name === '') {
    return null;
  }
  var candidates = [name, path.join(name, 'index')];
  var baseName = path.basename(name);
  if (baseName && baseName !== '.' && baseName !== '..') {
    candidates.push(path.join(name, baseName));
  }
  var info = null;

  candidates.every(function(candidate) {
    info = fis.uri(candidate, filepath);

    for (var i = 0, len = extList.length; i < len && !info.file; i++) {
      info = fis.uri(candidate + extList[i], filepath);
    }

    if (info && info.file) {
      return false;
    }

    return true;
  });

  return info;
}

[fis3-hook-commonjs] require('/xxxx/folder'); 无效。

问题描述：require('/xxxx/folder'); 这个 folder 同时又是 packages 里面的某个目录，无法识别。
期望：使用 packages 里面 main 来查找依赖的文件

fis配置umd2commonjs的问题

你好，我现在为了加载一个外部的jquery，它已经拥有了umd的加载规范了。然后我使用了以下配置:

fis.match('/static/js/jquery-3.1.0.js', {
    umd2commonjs:true
});

原来的jquery代码:

if (typeof define === "function" && define.amd) {
        define("jquery", [], function() {
            return jQuery;
        });
    }

发布后的jquery代码:

    if (typeof define === "function" && define.amd) {
        module.exports = jQuery;
    }

在我的一个widget组件里面有一个common.js文件

    var $ = require('static/js/jquery-3.1.0.js');
    console.log($);
    exports.version = '1.1.0';

然后我在html代码中使用的时候,并没有成功打印出内容.而是发现js资源确实被加载了.

    require.async(['widget/common/common.js'],function(){
          console.log(arguments);
    });

所以特别想问一下,使用 umd2commonjs:true 的配置的时候是不是还要加一个配置isMod:true? 如下：

fis.match('/static/js/jquery-3.1.0.js', {
    umd2commonjs: true,
    isMod: true
});

lookup 的顺序的问题

lookup.js 里 查找的顺序是这样的

[
    tryNoExtLookUp,
    tryFisIdLookUp,
    tryPathsLookUp,
    tryPackagesLookUp,
    tryFolderLookUp,
    tryBaseUrlLookUp,
    tryRootLookUp
 ]

我遇见了这样一个问题

我通过 bower 安装了 react，react 的包结构是这样的

react
  |- react.js
  |- react-dom.js
  |- react-with-addons.js

在 react-dom.js 中

有这样一行依赖

require('react');

但是我们团队是将react-with-addons.js当做 react 的

也就是说，我们在插件的配置中加入了react 的 path

{
    paths: {
        'react': '/bower_components/react/react-with-addons.js',
        'react-dom': '/bower_components/react/react-dom.js'
    }
}

我们在项目中的文件引的时候是没问题的，会自动替换为react-with-addons, 但是包自身的 react-dom里面的那个依赖被替换为了包自身的react.js

现在我如果一个页面同时引入 react 和 react-dom 的话，会出现 react.js, react-dom.js, react-with-addons.js 全部被加载进来

这个问题的原因其实就是，查找的第一个就已经匹配上了包里的 react.js 就不会进行tryPathsLookUp的寻找了

我觉得，用户的配置权限应该要提高，查找顺序可能需要调整一下

[
    tryFisIdLookUp,
    tryPathsLookUp,
    tryPackagesLookUp,
    tryFolderLookUp,
    tryNoExtLookUp,
    tryBaseUrlLookUp,
    tryRootLookUp
 ]

-

”fis3 已经默认不自带模块化开发支持"表达诡异

fis3 已经默认不自带模块化开发支持

从语义上推断，像是曾经"自带“过。
代码有版本的概念，倒不如以版本号作为参考，来说明什么时候“自带”，什么时候变成“不自带”的。

现在 baseUrl 只支持一个字符串，有可能修改让它支持一个字符串数组么？

依次遍历几个baseUrl，直到找的。

符合 commonJS 的组件的前置依赖列表也应该可设置跳过内置模块

如该组件，前置依赖可以在转换规则中声明，这样内置模块的依赖就可以忽略了
https://github.com/fis-components/select2/blob/master/select2.js#L3943

packages设置后cannot find module

在fis配置中添加了如下fis.hook('commonjs', {
baseUrl: './app',
extList: ['.js', '.ts'],
packages: [
{
name:'@angular/animations',
location:'../node_modules/@angular/animations',
main: 'bundles/animations.umd.js'
},
{
name:'@angular/animations/browser',
location:'../node_modules/@angular/animations',
main: 'bundles/animations-browser.umd.js'
},
{
name:'@angular/platform-browser',
location:'../node_modules/@angular/platform-browser',
main: 'bundles/platform-browser.umd.js'
},
{
name:'@angular/platform-browser/animations',
location:'../node_modules/@angular/platform-browser',
main: 'bundles/platform-browser-animations.umd.js'
},
{
name:'@angular/platform-browser-dynamic',
location:'../node_modules/@angular/platform-browser-dynamic',
main: 'bundles/platform-browser-dynamic.umd.js'
}
],
});
最终在打包时MODJS报错Cannot find module @angular/platform-browser/animations

没找到fis-conf.js

你的项目中没找到fis的配置文件，是要自己建立吗？

ignoreDependencies 无效