在前段时间，我把之前写的几个packag转载请注明出处：www.tangshuang.net【本文受版权保护】e重新命名为hello开头的包，例如he【本文首发于唐霜的博客】【原创不易，请尊重版权】llo-storage, hello-e【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。vents, hello-worker，本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。这些包非常基础，不依赖任何第三方包，就是本文作者：唐霜，转载请注明出处。【未经授权禁止转载】用基础的api来实现的，因此，代码非常简本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。单。面对这种随即编写，随即打包发布的pa【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netckage，我采用最小化的方式进行发布。

一个包，在发布的时候，其实最重要的是考虑【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。用户（开发者）使用这个包的使用场景，如果本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】不考虑，直接给源码就行了，干嘛还要进行构转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。建发布呢？所以，对于我而言，主要考虑两点【原创内容，转载请注明出处】未经授权，禁止复制转载。：

• 模块化【未经授权禁止转载】
【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【本文受版权保护】未经授权，禁止复制转载。【原创不易，请尊重版权】
• 代码兼容性【版权所有】唐霜 www.tangshuang.net
转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。

–转载请注明出处：www.tangshuang.net

模块化是指用户可能在不同的模块规范下使用【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net你的包，目前而言，有amd, cmd, 【原创不易，请尊重版权】未经授权，禁止复制转载。commonjs, es6 module转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】这几种，另外，还要考虑在浏览器中直接使用【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。<script>标签引用脚本【原创不易，请尊重版权】原创内容，盗版必究。（没有模块化环境）。针对这点，我采用um【版权所有，侵权必究】【版权所有，侵权必究】d的方案，但是代码是自己写的，我的源码是【本文受版权保护】【未经授权禁止转载】es6 module，因此在导出的时候使著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】用export default，但是在其他模块化规范下，并不需要def【原创内容，转载请注明出处】【原创内容，转载请注明出处】ault这样的接口，因此要直接expor未经授权，禁止复制转载。【本文首发于唐霜的博客】t整个模块，因此，我的方案就是，对于要直【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。接引用es6模块的用户，建议他impor本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】t源码文件，而其他模块化规范下，引用di【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】st文件：

// ES6
import HelloEvents from 'hello-events/src/hello-events'

// CommonJS
const HelloEvents = require('hello-events')

// 由于webpack在打包时能正确处理export default的问题，因此如果使用webpack，可以
import HelloEvents from 'hello-events'

对于开发者而言，这种解释应该是非常容易理【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net解的。使用习惯上也不会造成困扰。那么怎么著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。来实现这套方案呢？我在代码中采用umd的【本文首发于唐霜的博客】【本文受版权保护】方案实现：

!function(root) {

// ES6代码转码之后放在这里

if (typeof define === 'function' && (define.cmd || define.amd)) { // amd | cmd
  define(function(require, exports, module) {
    module.exports = HelloEvents;
  });
}
else if (typeof module !== 'undefined' && module.exports) {
  module.exports = HelloEvents;
}
else {
  root.HelloEvents = HelloEvents;
}

} (this || window);

这得益于我以前写过omd.js。那怎么才本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】能最终输出上面这个结构呢？我使用了gul【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netp来做，并用上了我写的gulp-buff原创内容，盗版必究。未经授权，禁止复制转载。erify包来实现文件内容的修改。这样，【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。当我使用babel把es6的代码转化为e【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.nets5的代码之后，再对文件内容进行修改，就【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。能得到上面这个结构了。

–本文作者：唐霜，转载请注明出处。

代码兼容性是指要考虑在不同浏览器版本中代【转载请注明来源】著作权归作者所有，禁止商业用途转载。码都能跑，主要是指一些es6新特性的降级本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。，例如async函数。因为我写的这些pa转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】cakge的功能非常弱，不会涉及gene【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。rator函数，也不会涉及symbol，【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。因此其他大部分功能都可以用es5语法代替【本文首发于唐霜的博客】未经授权，禁止复制转载。，并且找到对应的babel插件即可。

对于我而言，主要考虑到两个点：1.cla【未经授权禁止转载】【本文首发于唐霜的博客】ss语法；2.async/await语法原创内容，盗版必究。本文作者：唐霜，转载请注明出处。；3. …语法。这三个语法已本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】经是我日常写作的必须品，因此在我的构建脚未经授权，禁止复制转载。【本文首发于唐霜的博客】本里面，首先需要将这三个语法转化为es5著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。语法。1和3使用babel-preset未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】-env就可以自动解决，非常好用，2的话【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】我使用了bebel-plugin-asy转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。nc-to-promises，它可以将a转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】sync/await语法转换为promi【原创内容，转载请注明出处】【原创不易，请尊重版权】se，而preset-env默认使用be著作权归作者所有，禁止商业用途转载。【作者：唐霜】bel-plugin-transform本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】-async-to-generator（【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。将async/await语法转换为gen【原创不易，请尊重版权】【原创不易，请尊重版权】erator语法）和bebel-plug【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】in-transform-regener本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ator（使用一个特殊的变量regene【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】ratorRuntime来支持gener原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ator语法，这个变量需要你引入babe未经授权，禁止复制转载。【版权所有，侵权必究】l-polyfill），这两个插件和be未经授权，禁止复制转载。【版权所有，侵权必究】bel-plugin-async-to-【本文受版权保护】本文版权归作者所有，未经授权不得转载。promises有冲突，因此要禁用默认选【本文受版权保护】原创内容，盗版必究。项，在.babelrc里面这样写：

{
  "presets": [
    ["env", { "exclude": ["transform-async-to-generator", "transform-regenerator"] }]
  ],
  "plugins": [
    "async-to-promises"
  ]
}

但是，其实这里对于开发者而言，是需要进行本文版权归作者所有，未经授权不得转载。【作者：唐霜】权衡的，比如说，我会在代码中随意使用ar【关注微信公众号：wwwtangshuangnet】【转载请注明来源】ray.filter, Object.a【未经授权禁止转载】【转载请注明来源】ssign等，这些新接口是es6新加入的【未经授权禁止转载】【本文受版权保护】，对于老版本的浏览器是不支持的。但是这些【作者：唐霜】【转载请注明来源】接口不会被babel转译，因此，我也不会【转载请注明来源】【未经授权禁止转载】特意在自己的代码中去实现这一块。之所以不【关注微信公众号：wwwtangshuangnet】【作者：唐霜】自己在代码中实现这块，是因为这种接口很大本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net程度上其他包也会用。对于使用包的开发者而【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。言，他需要自己进行权衡，是不是要引入一个未经授权，禁止复制转载。【转载请注明来源】polyfill，如果他自己不想支持低版著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】本的浏览器，就不用引入了。这样，可以保证转载请注明出处：www.tangshuang.net原创内容，盗版必究。我自己的包里面的代码是绝对干净，但是在大未经授权，禁止复制转载。【原创不易，请尊重版权】部分情况下是可以运行的。

但是这里有一个问题，就是为什么不把asy未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。nc/await也留给上层的开发者自己去【原创内容，转载请注明出处】【本文首发于唐霜的博客】决定。这是因为这个语法没有办法用poly原创内容，盗版必究。原创内容，盗版必究。fill，你不可能通过一个polyfil原创内容，盗版必究。本文作者：唐霜，转载请注明出处。l让一个不支持async语法的浏览器变得本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】支持。这就是权衡，如果我在自己的所有包里【原创内容，转载请注明出处】【原创不易，请尊重版权】面都把这两个语法的转译代码写进去，那么最【未经授权禁止转载】【作者：唐霜】后，上层开发者的应用里面，就会有重复代码未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。，这也是没有办法的，如果webpack等【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。打包工具更加智能，就可以将这些重复代码提本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】升作用域来实现减少重复的效果。

–本文作者：唐霜，转载请注明出处。

上面讲完了我所关心的两个点之后，下面要出转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】代码了。不过别急。我们再讨论一个问题，就本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。是有没有必要任何包都用webpack？答【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。案显而易见，我现在开始不大喜欢webpa【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】ck，我越来越觉得webpack应该是一原创内容，盗版必究。【本文受版权保护】个应用层面进行打包时才用的上的工具，对于本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。一个package而言，不应该进行打包，【作者：唐霜】未经授权，禁止复制转载。而是以原始的module文件间引用关系对【作者：唐霜】未经授权，禁止复制转载。外使用，只不过需要做上述两个点的处理。

好了，上代码：【作者：唐霜】

// 安装对应的npm包
$ npm i -D babel-core babel-plugin-async-to-promises babel-preset-env gulp gulp-babel gulp-bufferify

// 构建脚本 build.js

var gulp = require('gulp')
var bufferify = require('gulp-bufferify').default
var babel = require('gulp-babel')

var namespace = 'HelloWorker' // 修改为自己的ClassName，一定要跟源码里面的class名对应
var entryfile = 'src/hello-worker.js' // 修改为自己的入口文件

gulp.src(entryfile)
  .pipe(babel())
  .pipe(bufferify(function(content) {

    content = content.replace(/Object\.defineProperty\(exports,[\s\S]+?\);/gm, '')
    content = content.replace(`exports.default = ${namespace};`, '')
    content = `
!function(root) {

${content}

if (typeof define === 'function' && (define.cmd || define.amd)) { // amd | cmd
  define(function(require, exports, module) {
    module.exports = ${namespace};
  });
}
else if (typeof module !== 'undefined' && module.exports) {
  module.exports = ${namespace};
}
else {
  root.${namespace} = ${namespace};
}

} (this || window);
    `
    content = content.trim()
    content += "\n"

    return content
  }))
  .pipe(gulp.dest('dist'))

// 进行构建
node build.js

这段构建脚本非常简单，稍微花点时间就读懂【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】了。根据自己的实际情况进行修改，比如路径【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。问题，比如namespace那个地方。总著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。之对于我自己而言，非常简单的包都会采用这转载请注明出处：www.tangshuang.net【版权所有，侵权必究】样的模式去做。