创建一个 NPM 包，支持 ES6 导入到 cherry pick 导出

Question

构建 NPM 包时，如何创建能够支持樱桃采摘 单独导出以节省 Webpack、Rollup 或 Browserify 包大小的构建？

首选语法为：

import { myModuleOne, myModuleTwo } from 'my-npm-package';

或

import myModuleOne from 'my-npm-package/myModuleOne';
import myModuleTwo from 'my-npm-package/myModuleTwo';

Answer 1

只需使用 ES6 导出：

export const myModuleOne = ...
export const myModuleTwo = ...

然后在 package.json 中将 module 属性设置为您的包的路径：

{
  main: 'path/to/umd/bundle.js',
  module: 'path/to/es/bundle.js',
  ...
}

Rollup 和 webpack 2 有 tree-shaking，所以生成的 bundle 将只包含你需要的模块。

Creating an NPM package that enables ES6 imports to cherry pick exports