Easypack-cli NPM

Easypack-Cli

Easypack-Cli 是基于Webpack的项目打包、编译工具。
Easypack-Cli 集成Webpack的一系列功能，并对一些常用的特定功能封装化，方便用户配置及使用。
Easypack-Cli 预设了一些特定的模板便于用户使用。
Easypack-Cli 基于 Webpack@4.x 版本开发。可能不兼容低于此版本的一些用法。

安装

$   npm install easypack-cli -g

使用

创建工程

$   easy init <template-name> [project-name]

#   example: 

#   easy init basic my-project

template-name （预设模板的名称）

该项为必填项。目前预设的模板如下：

名称	预设框架	描述
basic	-	基础项目模板,包含完整的配置文件及注释。
vue-spa	Vue	Vue的SPA应用模板。
vue-mpa	Vue	Vue的MPA应用模板。
react	React	React单页应用模版
react-ts	React	React+Typescript单页应用模版

project-name （工程的名称）
该项为非必填项。默认的工程名称为 "my-project"。

启动工程

$   easy start [--port port]

#   example:

#   easy start -p 3000

#   easy start --port 3000

执行命令启动内置服务器。服务器端口可以通过命令行参数指定。默认9000端口。
端口号也可在工程根目录下配置文件中进行配置。优先级：命令行 > 配置。

工程打包

$   easy build

工程执行打包命令后会在配置文件中指定的输出位置输出编译结果。

配置参数

工程编译运行的相关配置都存放在根目录下的 easy.config.js 中。

port(Number)(默认：9000) 内置服务器的启动端口。优先级低于命令行参数。。
openBrowser(Boolean|String)(默认：false)
在运行本地服务器成功后是否自动打开对应工程的页面。配置true时，如果工程是单页应用，会打开对应页面。多页则配置中的第一个页面。另外还可以直接指定打开的链接，链接必须符合条件(/^https?:\/\//)。
```
{
    openBrowser: false, // 默认
    openBrowser: true,
    openBrowser: "http://127.0.0.1:9000/demo.html",
    openBrowser: "https://github.com/2256184693/Easypack-Cli",
}
```
analyze(Boolean|Object)(默认：false)
基于webpack-bundle-analyzer实现。
是否查看输出文件的交互式可视化树形图，该配置在production环境下生效。
可以设置为true或 false，设置true时EasyPack会设置一个默认的插件配置。
也支持analyzer插件配置。具体信息请查看webpack-bundle-analyzer的文档。
```
{
    analyze: false, // 默认
    analyze: true, // 设置true工具会自动转成下边的默认object配置
    analyze: {
        analyzerMode: 'static',
    },
    analyze: {
        analyzerMode: 'static',
        reportFilename: 'report.html'
    }
}
```
vue(Boolean)(默认：false)
工程是否使用vue。设置后会在webpack配置中增加vue相关的loader以及plugin。
```
{
    vue: false, // 默认
    vue: true,
}
```
parallel(Boolean)(默认：false)
配置项基于thread-loader。
是否开启并行模式。默认关闭空，如果打开则会将在loader的尾端增加thread-loader，加快编译速度。
TODO:
1. parallel 配置化。可支持特定loader并行。
cssLoader(Object)
配置loader的相关参数。
支持设置extensions字段。该字段可配置工程支持的css类型。默认值为['.css', 'sass', 'scss', 'less']。工具会根据当前支持的extensions以及在配置文件rule中的配置项来智能添加要支持且没有在rules中增加自定义配置的类型loader。
该配置也支持定制化的设置特定loader的参数。具体配置可以自行查看对应loader的文档。
```
// 默认配置
{
    cssLoader: {
        extensions: ['.css', '.sass', '.scss', '.less'],
        css: {},
        sass: {
            indentedSyntax: true
        },
        scss: {},
        less: {}
    }
}
```

entryHtml(Object)

功能基于html-webpack-plugin实现。

入口html的配置项。配置相关的入口html模板及其他配置。

具体入口html的配置项请参考html-webpack-plugin。

{
    entryHtml: [
        {
            filename: 'index.html',
            template: './index.html',
            chunks: ['__common_vue__', 'index'], // 配置当前入口html要引入的chunk
            // 默认情况下的配置参数
            inject: true,
            minify: {
                minifyCSS: true,
                minifyJS: true,
                removeComments: true,
                collapseWhitespace: true
            }
        }
    ]
}

libraryMode(String ['all', 'custom'])(默认：all)
该配置项结合library一起使用。目前支持两种模式。
all模式下dll文件会插入到每一个入口。类似于全局公共模块。
custom模式下dll文件不会插入到每一个入口。插入情况是由entryHtml中的每一个入口的chunks配置的。
具体的用法请查看library

library(Object)

dll文件配置。可以增加多个dll文件入口。object的key代表当前的dll-chunk的名称。value类型为数组，代表当前chunk所包含的包。

默认情况下的配置：

{
    // vue项目将vue相关包打入dll
    libraryMode: 'all', // 所有入口全部引入dll。
    library: {
        /***
         * __common_vue__：当前dll的chunk名。其内包括三个vue必备或常用的包。
         **/
        '__common_vue__': ['vue', 'vue-router', 'vuex']
    }
}

自定义引入：index中只引入了vendor，而show中因为存在图标相关的展示，所以把echarts也引入了。

{
    libraryMode: 'custom',
    // 配置了两个dll-chunk
    library: {
        vendor: ['vue', 'vue-router', 'vuex'],
        echarts: ['echarts']
    },
    entryHtml: [
        {
            filename: 'index.html',
            // xxx
            chunks: ['vendor', 'index']
        },
        {
            filename: 'other.html',
            chunks: ['vendor', 'other']
        },
        {
            filename: 'show.html',
            chunks: ['vendor', 'echarts', 'show']
        }
    ]
}

TODO:

更加自定义的配置dll。支持参数是函数类型。

环境相关参数
工具中除了可以设置通用的配置项外，还支持不同环境使用不同的配置。
_devConfig 和 _prdConfig这两个配置项分别代表开发环境和生产环境的配置。值为函数类型。函数默认接收两个参数，第一个是当前的工作目录，第二个是当前的完整配置项。
_devDllConfig 和 _prdDllConfig这两个配置项分别代表开发环境和生产环境的Dll的配置。使用方法和上面的配置大同小异。函数增加了第三个参数，是当前工程的dll配置的相关信息。
```
{
    _devConfig: function(workspace, easyConfig) {},
    _prdConfig: function(workspace, easyConfig) {},
    _devDllConfig: function(workspace, easyConfig, dll) {},
    _prdDllConfig: function(workspace, easyConfig) {}
}
```