带有Rollup和ES模块的樱桃采摘模块？

Question

使用lodash es，我们可以挑选如下模块：从“lodash/drop”导入drop 这种方式只能使用drop，其他什么都不用。

如何使用Rollup实现同样的事情？

我正在配置一个反应器

这是我的rollup.config.js：

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import svgr from '@svgr/rollup';
import url from '@rollup/plugin-url';
import json from '@rollup/plugin-json';
import external from 'rollup-plugin-peer-deps-external';
import includePaths from 'rollup-plugin-includepaths';

const pkg = require('./package.json');

export default {
  cache: false,
  input: 'src/index.ts',
  output: [{ file: pkg.module, format: 'esm' }],
  treeshake: true,
  plugins: [
    external({
      preferBuiltins: false,
    }),
    babel({
      exclude: /node_modules/,
      plugins: ['external-helpers'],
      externalHelpers: true, // Exclude babel helpers.
    }),
    json(),
    resolve(),
    svgr({
      ref: true,
      svgo: false,
    }),
    typescript({
      clean: true,
      typescript: require('typescript'),
    }),
    url(),
    includePaths({
      paths: ['src'],
    }),
  ],
};




Answer 1

在摇晃ESM软件包时，似乎有一些陷阱。第一个问题是摇树只在生产中有效，第二个问题是你的包。json必须包含sideEffects:false属性。不幸的是，在开发过程中，树震动仍然会导入整个库以检索命名的导出。点击这里了解更多关于网页摇树的信息。

例如（开发中）：导入截图exmaple

在上面的示例中，我正在导入一个名为defaultLayoutOrds的命名导出；但是，它仍然显示所有库都已导入，即使webpack正在使用esm文件。但是，如果我将文件分开并直接导入，那么它会显示较小的导入大小。在生产中，这应该树摇动导入defaultLayoutORds并且就像第二个导入示例一样。也就是说，树摇动仅适用于webpack和ESM。

当与CJS/UMD/AMD合作时，摇树不起作用。相反，您必须将所有导出合并到一个类/对象（如导出对象）。然后使用ES6解构，就可以实现这种方法。

例如，lodash在一个文件中具有所有功能，例如：

    function throttle(func, wait, options) {
      var leading = true,
      trailing = true;

      if (typeof func != 'function') {
        throw new TypeError(FUNC_ERROR_TEXT);
      }
      if (isObject(options)) {
        leading = 'leading' in options ? !!options.leading : leading;
        trailing = 'trailing' in options ? !!options.trailing : trailing;
      }
      return debounce(func, wait, {
       'leading': leading,
       'maxWait': wait,
       'trailing': trailing
     });
   }

然后将该函数作为方法附加到对象：

lodash.add = add;
lodash.attempt = attempt;
lodash.camelCase = camelCase;
...
lodash.throttle = throttle;
lodash.thru = thru;
lodash.toArray = toArray;
...etc

然后使用IIFE导出洛达什对象。这样做的好处是您可以一次需要多个命名导入：

const { get, debounce, isEmpty } = require("lodash");

缺点是需要整个lodash对象。所以，为了解决这个问题，他们有单独的文件（和/或npm包！！！）将进口限制在所需的范围内。因此，他们在根包文件夹中包含了其他类似的文件：

...js
get.js
debounce.js
isEmpty.js
...js

然而，这样做的缺点是，您现在将有三种导入：

const get = require("lodash/get");
const debounce = require("lodash/debounce");
const isEmpty = require("lodash/isEmpty");

但是你将有一个整体较小的进口尺寸。。。但是，包的大小更大！为了缓解这种情况，他们将一些流行的方法分解成了自己的独立包：lodash。快点，洛达斯。debounce和lodash。我是空的！

总之，如果你不打算使用CJS/UMD/AMD（就像lodash那样），那么在客户端使用webpack和ESM软件包时，树震动将在生产中按预期工作。但是，如果为了更大的兼容性而包含其他版本，那么必须创建一个包含不同输入和不同输出的汇总配置数组。

例如：

const resolutions = {
    globals: {
        react: "React",
        "react-is": "reactIs",
    },
    exports: "named",
};

export default [
  {
    input: "./src/index.js", // this transforms the entire source
    output: [
        {
            file: pkg.main,
            format: "cjs",
            ...resolutions,
        },
        {
            file: pkg.fallback,
            format: "umd",
            name: "My-Example-Library",
            ...resolutions,
        },
        {
            file: pkg.module,
            format: "esm",
            ...resolutions,
        },
    ],
    ...etc
  },
  {
    input: "./src/components/example.js", // this transforms just an "example.js" file and ouputs to a "dist/example.[build].js" file
    output: [
        {
            file: "dist/example.cjs.js,
            format: "cjs",
            ...resolutions,
        },
        {
            file: dist/example.umd.js,
            format: "umd",
            name: "My-Example",
            ...resolutions,
        },
    ],
    ...etc
  }
]

关于不同构建的用例的更多信息可以在这里找到，一个示例汇总配置可以在这里找到。