reveal.md

theme	progresss	controls	slideNumber	overview	loop	history
white	true	true	false	true	true	true

怎么写一个能用的 npm 包

---

啥叫能用 ?

--

多环境

• browser
• node

--

漂亮的badge

--

发布到npm

--

CLI[可选]

npx your-custome-command ...[option]

---

讲完了

npm init
npm build
npm publish

---

package.json

• all in one page
• npm package
• webpack realated: module, jsnext:main, browser
• publish related: files, version, private, publishConfig
• directories: bin, doc, test, lib, example

---

Module规范

vue-dist

--

CommonJS/CJS

const depMod = require('someMod')
...
module.exports = exportMod

--

ES Module

import { namedExp }, defaultExp from 'someMod'
...
export const namedExport = {}
export default defaultExport = {}

--

UMD

(function (root, factory) {
  "use strict";

  // AMD
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  }
  // CommonJS
  else if (typeof exports === 'object') {
    module.exports = factory();
  }
  // Browser
  else {
    root.moduleName = factory();
  }
})(this, function () {
  "use strict";
 // 具体的代码
 ...
})

--

mjs

<script nomodule src="fallback.js"></script>
<script type="module">
  import { addTextToBody } from './utils.mjs';
  addTextToBody('Modules are pretty cool.');
</script>

---

构建 - Babel

---

npm 发布

npm login
# update package
npm version <newVersion>
npm publish

--

cnpm sync

--

Open Source CDN

• jsDelivr
• unpkg
• cdnjs

<script src="https://cdn.jsdelivr.net/npm/package@version/file"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dzh.js"></script>

---

谢谢

---

参考

• compat-table
• Packages-wiki
• vue
• axios
• antd
• understanding-exports
• babel runtime vs babel-polyfill
• babel-plugin-import
• package a module
• How to write and build JS libraries in 2018
• babel-preset-env
• add-module-exports
• es-module-spec
• esnext vs es6(es2015)