调研笔记。

• 问题
  • package.json 里的各个项是什么意思？
  • cjs, esm, umd, amd 是什么意思？他们是怎么来的？
  • es 2015 和 es6 是什么关系？
  • tree-shaking 怎么实现的？
  • 为什么有 .mjs?
  • 组件打包怎么处理补丁？@babel/plugin-transform-runtime 要不要加 polyfill?
• 两个功能
  • doc 命令
    • 包括 doc dev 和 doc build
    • 基于 docz 实现
    • 实现上可以再分层，通过 umi-plugin-docz 实现，这样项目要用 docz 也可以用
    • 然后 library 引 umi-plugin-docz 实现 doc 命令
  • build
    • 基于 rollup + babel
  • publish
    • changelog
    • commit
    • tag
    • push
• 调研
  • htm
    • https://github.com/developit/htm
    • 基于 micro bundle
    • microbundle src/index.mjs -f es,umd --no-sourcemap --target web
  • redux
    • 基于 rollup
    • 打出以下格式
      • lib/redux.js
        • commonjs (cjs)
        • external 依赖
        • 不压缩
      • es/redux.js
        • es module
        • external 依赖
        • 不压缩
      • es/redux.mjs
        • 为浏览器用的 es module
        • es module
        • 不 external 依赖
        • replace NODE_ENV 为 production
        • 压缩
      • dist/redux.js
        • umd，暴露为 Redux 全局变量
        • replace NODE_ENV 为 development
        • 不压缩
      • dist/redux.min.js
        • umd，暴露为 Redux 全局变量
        • replace NODE_ENV 为 production
        • 压缩
  • react-router
    • cjs/react-router.js
      • commonjs
      • external 依赖
      • 同步生成 min 文件
    • esm/react-router.js
      • es module
      • external 依赖
      • babel 配 runtimeHelpers: true，并且加 @babel/transform-runtieme + useESModules: true
    • umd/react-router.js
      • globals = react: React
      • 对外露出 ReactRouter
      • 调 commonjs 插件把 commonjs 转成 esm，让 node_modules 下的模块也能走 tree-shaking
  • reach-router
    • es
      • 把 src 下的文件打到 es 目录下
      • 基于 babel，env + modules: false，不做 modules 转化
    • cjs
      • 把 src 下的文件打到 ./ 根目录
      • 基于 babel, env + modules: 'commonjs'
    • umd
      • umd/reach-router.js
        • 有 min 版本
        • 基于 rollup
        • globals 掉 react 和 react-dom
  • redux-saga
    • 多包，基于 lerna，lerna run --parallel build
      • lerna-alias
    • external peer 是什么意思？
    • 有类似 react 的 cjs entry proxy，自动切 production 和 development 时的 cjs 模块
      • http://github.com/redux-saga/redux-saga/blob/f55c6d2f34afd86962424303dfa72dda18a9f34d/packages/core/scripts/createProxyCjsEntries.js#L22
    • umd 包时只 external peerDependencies，cjs 和 esm 包 external dependencies + peerDependencies
    • effects/package.json 子路径
      • https://segmentfault.com/a/1190000012265494
    • 有用到 experimentalCodeSplitting
  • immer
    • dist/immer.js
      • cjs
      • 不压缩
    • dist/immer.umd.js
      • umd
      • 压缩
    • dist/immer.module.js
      • es
      • 不压缩
  • mobx
    • 把 src 生成 .build.es5 和 .build.es6
    • 生成以下文件
      • 基于 rollup
      • lib/mobx.js, cjs
      • lib/mobx.module.js, esm
      • lib/mobx.es6.js, esm
    • 生成 umd 包 lib/mobx.umd.js
      • 基于 browserify
    • 基于 envify 生成 lib/mobx.prod.js
    • 基于 uglifyjs 生成
      • lib/mobx.min.js
      • lib/mobx.umd.min.js
• 几种格式
  • es 5 module system
    • cjs (common js)
      • require 和 module.exports
      • 同步加载
      • 适合 server 端
    • amd
      • Asynchronous Module Definition
      • seajs, requirejs
      • define + require
      • 异步加载
      • 适合 browser 端
  • es 6 modules
    • 来自 es6 / es2015
    • 同时解决 cjs 和 amd 的需要
    • export (default) 和 import
    • 浏览器里怎么用？
      • import()
      • require.ensure()
      • System.import()
      • type="module"
  • umd
• 产出格式
  • cjs
    • 给谁用？
      • node 端
      • 组件是不是不用产出 cjs 产物？
        • 不是，比如要支持 ssr
    • 怎么产生？倾向后者。
      • babel 直接转，比如把 src 转成 cjs 或 lib，多文件，然后 package.json 里配 lib
      • rollup 转，单文件，比如生成 dist/[name].js
        • 可以区分 development 和 production
        • 可以有 proxy 层，自动引入 dev 或 prod 版本
    • 注意点
      • external dependencies + peerDependencies
  • esm
    • 给谁用？
      • webpack（浏览器端）
      • 浏览器直接用
        • script type="module"
      • node 端？
        • TODO，是否可以通过 .mjs 扩展直接用？
        • https://nodejs.org/api/esm.html
    • 为什么用？
      • 新版方案，解决 commonjs 和 amd 的方案
      • tree shaking，因为是静态的产出
    • 怎么产生？
      • babel 转，比如把 src 转成 es，多文件，然后 package.json 里配 es
      • rollup 转，单文件，比如生成 dist/[name].esm.js
        • esm 已经可以做 tree-shaking，所以不需要产生多个文件，即可实现按需
        • 单文件在 webpack 使用时更快，因为少了文件系统 io
    • 注意点
      • external dependencies + peerDependencies
      • 根据库的实际情况考虑是否配 sideEffect: false 或者 sideEffect: [文件1， 文件2]
  • umd
    • 给谁用？
      • 浏览器直接引
    • 怎么产生
      • rollup
        • 单文件，比如生成 dist/[name].umd.js
        • 同时生成 min 文件，比如 dist/[name].umd.min.js
        • 然后在 package.json 里配 unpkg 或 umd:main 指向他
      • webpack
        • 感觉会慢且大
      • browserify
        • 过时
    • 注意点
      • 只 external peerDependencies，不 external dependencies
        • 比如我们通常要 external react, react-dom, antd, dva 等
        • rollup 里通过 globals 实现
• 方案
  • 基于 rollup
    • 相比 webpack
      • 构建速度快
      • 产物小
      • tree-shaking 优势
        • 通过 commonjs 插件，把 node_modules 下的依赖也转成 esm，使之支持 tree-shaking
    • 专注于组件构建，社区成熟
  • 关于配置
    • 配置方式
      • umi 通过插件使用，['umi-plugin-library', {}]
      • bigfish 通过 library 配置
    • 配置项
      • entry: src/index.js
      • extraBabelPlugins
        • 比如为 antd 配置 babel-plugin-import
      • umd
        • globals（别名：externals）
          • 比如 react:React,'react-dom':ReactDOM
      • cjs
        • type: rollup | babel
        • dir: lib
        • proxy: true | false
      • esm
        • type: rollup | babel
        • dir: es
      • doc
        • 透传给 umi-plugin-docz 用
  • 脚手架 MVP
    • 注：不包含 doc 的部分
    • package.json
      • name: foo
      • main: dist/foo.js
        • cjs
      • module: dist/foo.esm.js
      • unpkg: dist/foo.umd.js
    • src
      • Foo.js
      • Bar.js
      • index.js
        • import from Foo.js and Bar.js
      • index.css
    • 输出
      • dist/
        • foo.js
        • foo.esm.js
        • foo.umd.js
        • foo.umd.min.js
        • 一一对应的 css 文件
  • 使用场景
    • react 组件
    • 非 react 组件
    • 独立库
    • 集成在项目中使用
      • 可指定 entry，比如 components/index.js
      • 可指定输出路径，并在此路径包含 package.json
        • name
        • dependencies
        • 等等
    • lerna 项目
  • 包含功能
    • doc
      • dev
      • build
      • publish
    • build
      • 支持 -w, --watch
    • test
      • 走 umi-test 就好
    • publish
      • 利用 git-extra 里的 git changelog 生成 changelog.md
        • https://github.com/tj/git-extras/blob/master/Commands.md
      • 利用 np 发布
• package.json 里的项
  • main
    • 指向 cjs
  • module
    • 指向 esm
  • unpkg
    • 指向 umd
  • umd:main
    • 同 unpkg，用一个就好了
  • typings
  • 这些项在 webpack 里的应用
    • target 为 web 适为 browser, module, main
    • 其他 target 为 module, main
    • 所以，webpack 构建适会优先用 module
    • https://webpack.js.org/configuration/resolve/#resolve-mainfields
• tree shaking
  • 去死代码
  • 依赖 es module 的 Static module structure
    • import 和 export 都是静态的
    • 相比之下，commonjs 的 require 和 exports 是动态的
  • 概念和名词由 rollup 引入
  • sideEffects
    • 可以是 false，也可以是数组
    • 在 100% 的 ESM 世界里是不需要的
• 脑暴
  • react 包的处理方式
  • mjs
  • 怎么用？
• 词汇
  • JavaScript
  • ECMAScript
  • ES3
    • 1999
  • ES5
    • 第 5 版 ECMAScript，于 2009 年标准化
  • ES6 / ES2015
    • 第 6 版
  • ES2016
    • 第 7 版
• JavaScript 来源
  • 1995
    • LiveScript，作为 Netscape Navigator 的一部分
    • 一年半后，更名为 JavaScript
  • 1996
    • Netscape 向 ECMA International 提交标准化 JavaScript
    • 即 ECMAScript
  • 1999
    • ECMAScript 3
  • 2009
    • ECMAScript 5
  • 2015
    • ECMAScript 6
  • 2016
    • ECMAScript 7

参考

• https://medium.com/computed-comparisons/commonjs-vs-amd-vs-requirejs-vs-es6-modules-2e814b114a0b
• http://exploringjs.com/es6/ch_modules.html
• https://nodejs.org/api/modules.html
• https://nodejs.org/api/esm.html
• https://benmccormick.org/2015/09/14/es5-es6-es2016-es-next-whats-going-on-with-javascript-versioning
• https://github.com/tc39/proposals
• https://webpack.js.org/guides/tree-shaking/
• http://2ality.com/2017/05/es-module-specifiers.html
• https://github.com/standard-things/esm
• https://unpkg.com/