混用[es6]import和require会产生两个_aio.js文件

[fancyboynet]

正常情况,只产生一个aio.js

var $ = require('jquery')
var util = require('/widget/util/util')
var dom = require('/widget/dom/dom')

混用情况,会产生aio.js和aio2.js

var $ = require('jquery')
import util from '/widget/util/util'
var dom = require('/widget/dom/dom')

fis.config

//babel
fis.match('/{page,widget}/**.js', {
    parser: fis.plugin('babel-5.x', {
        stage: 3,
        blacklist: ["useStrict"]
    })
})

fis.match('::packager', {
    // npm install [-g] fis3-postpackager-loader
    // 分析 __RESOURCE_MAP__ 结构，来解决资源加载问题
    postpackager: fis.plugin('loader', {
        resourceType: 'mod',
        useInlineMap: true // 资源映射表内嵌
    })
});

// pack
fis.media('prod')
    // 启用打包插件，必须匹配 ::packager
    .match('::packager', {
        postpackager: fis.plugin('loader', {
            allInOne: {
                ignore: ['static/lib/**', 'node_modules/jquery/**']
            }
        }),
        packager: fis.plugin('map'),
        spriter: fis.plugin('csssprites', {
            layout: 'matrix',
            margin: '15'
        })
    });

[2betop]

主要是 script 外链和内联混用才会产生多个。

[fancyboynet]

能具体解释一下吗，你是说babel编译变成内联引用了？

[2betop]

你先看一下他们之间被什么隔开了，我是说只会因为有内嵌 js 才会隔开他们，不会因为一部分是 babel 一部分是没编译而隔开。

[fancyboynet]

找到区别了，不过不知道解决方法是啥，import的写法改变了jquery的依赖顺序，而我jquery是独立加载的

require写法编译结果

  var $ = require('node_modules/jquery/dist/jquery');
  var util = require('widget/util/util');
  var dom = require('widget/dom/dom');

import写法编译结果,会导致jquery的加载顺序晚于'widget/util/util'

  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

  var _widgetUtilUtil = require('widget/util/util');

  var _widgetUtilUtil2 = _interopRequireDefault(_widgetUtilUtil);

 //上面是babel添加的
  var $ = require('node_modules/jquery/dist/jquery');
  var dom = require('widget/dom/dom');

[fancyboynet]

好像跟import没关系，是加载顺序的问题感觉，有配置是让jquery固定先加载的吗

[2betop]

先看看 aio.js和aio2.js 之前隔了什么，看产出的 html 源码。

[fancyboynet]

隔了jquery

<script src="/static/lib/mod.js"></script>
<script type="text/javascript" src="/pkg/page/xxx_aio.js"></script>
<script type="text/javascript" src="/node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="/pkg/page/xxx_aio_2.js"></script>

[2betop]

那你看看这个吧，看是哪个条件让他们断开了。https://github.com/fex-team/fis3-postpackager-loader/blob/master/lib/pack.js#L82 初步怀疑是配置了allInOne 的 ignore

[fancyboynet]

我是配置了ignore，因为我想jquery单独加载

[2betop]

import 会被提前，既然这样，你把 import "node_modules/jquery/dist/jquery" 到最前面。

[fancyboynet]

可以是可以，因为一些组件并不依赖jquery,组织上感觉应该不应该有先后顺序的，是不是跳过ignore后，剩下的合并在一起，而不是分开合并更合理呢

[2betop]

因为不确定引入的 js 有没有顺序问题，所以没有因为打包而打乱顺序。

[fancyboynet]

是否考虑加一个类似framework:true的js配置项，效果就跟<script src="" data-framework></script>一样，这样不知道能不能解决问题

[fancyboynet]

应该是framework:['node_modules/jquery/**']

[2betop]

不明白为何要单独引入，既然在依赖里面那就可以一起合并啊。

[fancyboynet]

多页面共享缓存，库文件不都推荐单独引入吗

[2betop]

试试用最简单的 packTo 方式，把 jquery 和 mod.js 打包到一个文件，同时别关闭 loader 的 allInOne 打包配置。