js工具包踩坑日记花了一段时间，整了一下前端工具库，总结下过程中遇到的问题，温故知新... 一句话概况这次的心情的话:

背景

花了一段时间，整了一下前端工具库，总结下过程中遇到的问题，温故知新...
一句话概况这次的心情的话: 用一把大刀削了一只铅笔。

目标

实现两种调用方式

import outils from '@zhisland/outils'; // ES6
<script src="./outils.min.js"></script> // 直接运行的文件的引用

开始

工具选型

webpack打包
JEST测试
使用jsdoc生成注释文档
用eslint优化代码格式
babel编译

项目目录说明

outils
  |—— lib // 源文件目录
  |   |—— index.js // 入口文件
  |   |—— *.js // 其他相关文件
  |—— dist // 生成文件目录，modules引用文件
  |—— doc // 生成的jsdoc说明文档，点击index.html可以本地查看
  |—— scripts // 用到的脚本文件及相关配置
  |—— static // index.html本地调试page
  |—— test // 测试用例

问题一（npm引入webpack打包出来的是一个空对象）

原因: 期望打包出来的outils.min.js是符合commonjs规范，但是在配置中并没有指出，所以webpack打包出来的文件，什么也没导出。
我们平时开发中，打包时也不需要导出一个变量，只要打包的文件能在浏览器上立即执行即可
libraryTarget就是问题的关键，通过设置该属性，我们可以让webpack知道使用何种规范导出一个变量，当你的libraryTarget值为commonjs2的时候，你的bundle最终会以module.exports导出整个bundle模块，这种情况大部分是在node环境下运行，在amd下也是OK的。

最后项目运行的脚本和部分测试用例
脚本

测试

问题二

打包出的文件不便阅读
引入的时候默认多了一层default属性
let outils = require('@zhisland/outils').default;
原因：
webpack自己实现了一套__webpack_exports__ webpack_require module机制
它把每个js文件包裹在一个函数里，实现模块间的引用和导出。

rollup替换webpack打包工具库

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

使用rollup比较喜欢它的配置简单,专做一件事，可以通过插件扩展功能，也可和gulp配合打造自动化的前端工作流

不得舍弃一些功能

不能像webpack直接读取pagege.json文件，需要额外安装rollup-plugin-json
不能使用require.context动态引入文件，只能静态引入
当然还有一些其它webpack包含的好用的功能

问题三（.babalrc文件）

{
  "presets": [
    ["es2015", {
        "modules": false
    }]
  ]
}

原因:
之所以使用modules:false这个参数，是因为rollup默认是通过ES6模块语法来解析文件间的依赖，rollup默认是不支持解析common.js的模块规范的（怎么让rollup支持我会在接下来的demo中讲解），因此需要让babel不转化模块相关的语法，不然rollup在使用过程中会报错

问题四 (bable配置不兼容jest和rollup)

问题描述:
预设中有“latest”时，jest测试可以解析es6模块引用，但rollup打包报错
解决方案:设置babel环境变量

发布:

修改package的version，说明CHANGELOG，然后登录与发布，需要本地执行$ npm run beforePublish，提交之后执行。

$ npm login
npm publish

js工具包踩坑日记

背景

目标

开始