fex-team / fis3-packager-map Goto Github PK

View Code? Open in Web Editor NEW

7.0 16.0 7.0 18 KB

A packager plugin for fis to pack resources.

License: BSD 2-Clause "Simplified" License

JavaScript 100.00%

fis3-packager-map's Introduction

fis3-packager-map

fis3 中内嵌的打包工具。

配置方式

$ vi path/to/project/fis-conf.js

fis.match('*.css', {
  packTo: '/pkg/all.css'
});

fis.match('*.js', {
  packTo: '/pkg/all.js'
});

或者：

fis.match('::package', {
  packager: fis.plugin('map', {
    'pkg/all.js': [
      'libs/*.js',
      'widget/*.js'
    ]
  })
})

{'pkg/xxx': [...], ...} 的格式也可用于 fis.set("pack", ) 或 fis-pack.json 来设置。

规则优先级：

通过插件配置 > fis.set("pack", {}) > fis-pack.json > match( 'xxx' , {`packTo`})

## 配置项

1. `useTrack` 默认 `true`。 是否将合并前的文件路径写入注释中，方便定位代码。
2. `useSourceMap` 默认为 `false`。是否开启 souremap 功能。

### 关闭输出路径信息

默认打包后输出路径信息,便于调试.形式如下

```js
/*!/components/underscore/underscore.js*/

可以在插件的配置中关闭路径信息输出

fis.match('::package', {
  packager: fis.plugin('map', {
    useTrack : false, // 是否输出路径信息,默认为 true
    'pkg/all.js': [
       'libs/*.js',
       'widget/*.js'
    ]
  })
})

开启 SourceMap 功能

fis.match('::package', {
  packager: fis.plugin('map', {
    useSourceMap : true, // 合并后开启 SourceMap 功能。
    'pkg/all.js': [
       'libs/*.js',
       'widget/*.js'
    ]
  })
})

排除某个文件

顺序不可颠倒，必须在**规则里的文件里排除某个文件

fis.match('::package', {
  packager: fis.plugin('map', {
    'pkg/all.js': [
       'libs/**.js',
       '!libs/external.js'
    ]
  })
})

fis3-packager-map's People

Contributors

Stargazers

Watchers

Forkers

zidom guoxmin johnx7271 bb-components zhuzhuaicoding joannamo dmt-space

fis3-packager-map's Issues

多个js打包后，怎样packTo到指定域名链接？

比如现在有3个js，1.js, 2.js, 3.js
pacto后成为 www.baidu.com/lib.js
该怎样配置？

packTo的时候，是按需收集打包还是按目录收集打包,如何切换?

    packager: fis.plugin('map', {
        useTrack : true, // 是否输出路径信息,默认为 true
        'pkg/common.js': [
            'util/common/**'
        ]
    })

生成pkg/common.js的时候,是按目录util/common下面的所有文件收集,还是按页面上用到了这个目录下的文件收集,如何按需收集?因为按目录的话,如果这个目录下有两个jquery版本的文件就会造成重复.

怎么合并html文件呢？是不支持吗？

用Angular开发，想把html文件合并了，减少http请求，怎么把html 模板文件合并呢？

useTrack 配置报错

不配置useTrack不会报错

fis.match('::package', {
  packager: fis.plugin('map', {
    useTrack : false,
    'pkg/all.js': [
      'all/*.js'
    ]
  })
})

一旦配置useTrack , 报错

TypeError: undefined is not a function
    at /Users/baidu/.nvm/versions/node/v0.12.5/lib/node_modules/fis3/node_modules/fis3-packager-map/index.js:49:35
    at Array.filter (native)
    at find (/Users/baidu/.nvm/versions/node/v0.12.5/lib/node_modules/fis3/node_modules/fis3-packager-map/index.js:47:20)
    at /Users/baidu/.nvm/versions/node/v0.12.5/lib/node_modules/fis3/node_modules/fis3-packager-map/index.js:81:20
    at Array.forEach (native)
    at /Users/baidu/.nvm/versions/node/v0.12.5/lib/node_modules/fis3/node_modules/fis3-packager-map/index.js:69:14
    at Array.forEach (native)
    at module.exports (/Users/baidu/.nvm/versions/node/v0.12.5/lib/node_modules/fis3/node_modules/fis3-packager-map/index.js:53:21)
    at cb (/Users/baidu/.nvm/versions/node/v0.12.5/lib/node_modules/fis3/lib/release.js:159:5)
    at /Users/baidu/.nvm/versions/node/v0.12.5/lib/node_modules/fis3/lib/util.js:1088:9

不支持合并js中的多个__uri资源

在js文件中通过**__uri()**查找到依赖的js/css的路径，

    {
      name : 'video.js',
      module : false,
      files :
        [ __uri('../bower_components/video.js/dist/video-js.min.css'),
          __uri('../bower_components/video.js/dist/video.min.js'),
          __uri('../bower_components/video.js/dist/lang/zh-CN.js'),
          __uri('../bower_components/videojs-resolution-switcher/lib/videojs-resolution-switcher.css'),
          __uri('../bower_components/videojs-resolution-switcher/lib/videojs-resolution-switcher.js'),
        ]
    },

在fis-config中将css/js打包为一个文件,并且忽略部署被合并的这些文件。

fis.match('/bower_components/{video.js,videojs-resolution-switcher}/**/{video.min,zh-CN,videojs-resolution-switcher}.js', {
  packTo: '/libs/videojs.js',
  release: ''
})
.match('/bower_components/{video.js,videojs-resolution-switcher}/**/{video-js.min,videojs-resolution-switcher}.css', {
  packTo: '/assets/styles/videojs.css',
  release: ''
})
.match('*', {
  deploy: [
    fis.plugin('skip-packed'),
    fis.plugin('local-deliver', {
      to: fis.project.getTempPath('www')
    })
  ]
})

然而部署后的js文件中，**__uri()**查找的资源并没有指向合并后的文件。

    {
      name : 'video.js',
      module : false,
      files :
        [ '/bower_components/video.js/dist/video-js.min.css',
          '/bower_components/video.js/dist/video.min.js',
          '/bower_components/video.js/dist/lang/zh-CN.js',
          '/bower_components/videojs-resolution-switcher/lib/videojs-resolution-switcher.css',
          '/bower_components/videojs-resolution-switcher/lib/videojs-resolution-switcher.js',
        ]
    },

uglify-js压缩问题配置不压缩require关键字失效

版本v3.1.3

当被打包的文件组A和文件组B有交集时，文件组B的target会出现丢失文件的情况。

打包配置：

fis.match('::package', {
packager: fis.plugin('map', {
// app js
'nresource/js/app.js': [
'appframe/kernel/jquery-1.10.2.js',
'appframe/kernel/jquery.easing.js',
'appframe/kernel/functions.js',
'nresource/js/bootstrap.min.js',
'nresource/js/respond.js',
'appframe/kernel/require.js',
'appframe/kernel/coreutil.js'
],
// app css
'nresource/css/app.css': [
'nresource/css/bootstrap.css',
'nresource/css/base.css',
'nresource/css/layout.css',
'nresource/css/common.css',
'nresource/css/component.css',
'nresource/css/ui-dialog.css'
],

// index js
'nresource/js/index.js': [
    "appframe/kernel/jquery-1.10.2.js",
    "appframe/kernel/jquery.easing.js",
    "appframe/kernel/require.js",
    "appframe/kernel/coreutil.js",
    "appframe/kernel/functions.js",
    "nresource/js/bootstrap.min.js",
    "nresource/js/jquery.prettyPhoto.js",
    "nresource/js/jquery.isotope.min.js",
    "nresource/js/main.js",
    "nresource/js/wow.min.js",
    "nresource/js/html5shiv.js",
    "nresource/js/respond.min.js"
],
// index css
'nresource/css/index.css': [
    "nresource/css/bootstrap.min.css",
    "nresource/css/font-awesome.min.css",
    "nresource/css/prettyPhoto.css",
    "nresource/css/animate.min.css",
    "nresource/css/main.css",
    "nresource/css/responsive.css"
]

})
})

如上所示，app.js和index.js有内容重复的js，打包之后，index.js中缺失了相交的这部分js。

编译的时候就会报：[ERROR] Cannot read property 'substr' of undefined

> var list=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
undefined
> list.sort(function(a,b){return list.indexOf(a) - list.indexOf(b);})
[ 1, 7, 3, 4, 5, 6, 2, 8, 9, 10, 11, 12 ]
> list.sort(function(a,b){return (list.indexOf(a) - list.indexOf(b));})
[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
> list.sort(function(a,b){return list.indexOf(a)-list.indexOf(b);})
[ 1, 7, 3, 4, 5, 6, 2, 8, 9, 10, 11, 12 ]
>