xc-utils v1.0.0-alpha

说明文档

这个是一个前端js工具包，主要提供一些公共的js类库。

• 主要实现：
  • 提供可以通过npm安装的工具函数库
  • 支持按需加载
  • 可以打包让客户端用标签引入
  • 支持按需打包
  • 支持本地运行
• 技术:

wepack+babel+handlebars+karma+mocha+ES5/ES6+node

目录结构

|-- build                           // 打包入口文件
   ├─ build.js                      // 默认的打包入口文件
   ├─ dev-server.js                 // 默认的打包入口文件
   ├─ webpack.base.conf.js          // 默认的打包入口文件
   ├─ webpack.build.conf.js         // 默认的打包入口文件
|-- config                          // 个人配置
   ├─ index.js                      // 打包配置文件
|-- coverage                        // 测试报告
|-- dist                            // 打包目录
|-- entry                           // 打包入口目录
   ├─ index.js                      // 默认的打包入口文件
|-- src                             // 功能代码
   ├─ index.js                      // 总的输出文件
|-- test                            // 单元测试代码 
├─ karma.conf.js                    // 单元测试配置文件
├─ package.json                     // npm配置文件
├─ README.md                        // 项目说明文档
├─ API.md                           // api说明文档

开始

• 加载依赖包：

npm install

• 本地发布：

npm run dev

默认启动本地8080端口。本地启动后，工具js的访问地址：

localhost:8080/index.js

• 打包：

  这里打包需要编写自己的入口js文件，再修改config/index.js中的配置，以实现按需打包。默认情况下，打包之后的js的文件路径在dist文件夹下，并且和入口js文件的目录结构相同。

// entry/demo/template/template.js
import template from '@/demo/template'

window.template = template;

// config/index.js
module.exports = {
  build: {
    // 1.打包入口文件
    // 虽然我们提供了一个默认的打包入口文件 index.js 文件，
    // 但是有的时候我们或许并不需要全部的函数库，我们想要的只是其中几个函数，
    // 这样打包的js文件显然很臃肿，因此在这里你可以编写自己的打包入口文件，引入你想要的js库，然后配置在这里打包。
    entry: 'demo/template/template.js',
    // 2.是否输出 sourceMap
    // 这个map文件是提供压缩之后的代码和源码的对应关系的文件，chrome可以解析这个文件在浏览器上显示我们的源码，
    // 这主要是为了调试方便，但是到线上的时候必须得把这个关掉，否则会暴露自己的源码。
    sourceMap: true,
    // 5.是否输出gzip格式的文件
    // nginx可以设置让我们请求的js走gzip文件，这将大大减小我们的js文件的大小。
    // 如果这个设置为true，则会输出一个.gz文件。
    productionGzip: true,
    // 6.执行gzip压缩的文件列表
    productionGzipExtensions: ['js', 'css']
  }
};

运行命令npm run build即可打包，打包结束的js目录结构如下：

|-- dist                      
   |-- demo
      |-- template
         ├─ template.js           

发布到npm私服上：

npm publish

其他项目引入：

npm i ihdutils--save-dev