Yarn不会同时发布/添加包的ESM和CJS版本？

Question

我们有一个与Parcel捆绑在一起的应用程序，它使用一个UI库(react组件)。UI库与Rollup捆绑在一起，并作为私有包发布到NPM上。

我一直在尝试迁移我们的应用程序以使用Parcel 2，但是Parcel抱怨它在dist文件夹中找不到UI库的ESM版本。果然，当我检查我的node_modules目录时，UI的dist文件夹只包含一个文件：index.cjs.js。

奇怪的是，UI库被设置为使用源地图以CJS和ESM格式构建。当我在本地构建项目时，Rollup生成CJS和ESM文件及其源映射：index.cjs.js、index.cjs.js.map、index.esm.js和index.esm.js.map。因此，不知何故，看起来要么是：(1) Yarn只将CJS版本的库发布到NPM，要么(2)当UI库添加到应用程序中时，只构建了CJS版本。这两种情况对我来说都没有意义。

下面是我们的package.json和rollup.config.js文件的相关部分：

{
 "name": "@thecb/components",
  "version": "4.0.23",
  "description": "Common lib for CityBase react components",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "source": "src/index.js",
  "scripts": {
    "storybook": "start-storybook",
    "build": "rollup -cm"
  },

import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import babel from "rollup-plugin-babel";
import json from "rollup-plugin-json";
import visualizer from "rollup-plugin-visualizer";
import pkg from "./package.json";

import * as formattedInput from "formatted-input";

const globals = {
  react: "React",
  "react-dom": "ReactDOM"
};

const plugins = [
  resolve({ preferBuiltins: false }),
  babel({
    exclude: "node_modules/**",
    presets: ["@babel/env", "@babel/preset-react"]
  }),
  json(),
  commonjs({
    include: "node_modules/**",
    namedExports: {
      "formatted-input": Object.keys(formattedInput)
    }
  }),
  visualizer()
];

const external = [...Object.keys(pkg.peerDependencies || {})];

const output_data = [
  {
    file: pkg.main,
    format: "cjs"
  },
  {
    file: pkg.module,
    format: "esm"
  }
];

export default output_data.map(({ file, format }) => ({
  input: "src/index.js",
  output: {
    file,
    format,
    globals
  },
  plugins,
  external
}));

有人知道为什么这个库的ESM版本不能发布或安装吗？

Answer 1

回复晚了，但我今天遇到了非常相似的事情。不使用rollup，而是使用tsc直接输出dist/cjs/*和dist/esm/*。

我发现我的构建过程在本地生成了两个输出，但是yarn publish生成的tarball只包含dist/cjs/*。TBH我不确定为什么；我目前的理论是yarn以某种方式使用了"main": "dist/cjs/index.js"，并由此推断出包包含的一些默认值。

我可以告诉你的是，通过将"files": "dist"添加到我的package.json中，我获得了yarn自身的行为，并像我最初预期的那样将dist/cjs/*和dist/esm/*添加到了包的tarball中。

https://docs.npmjs.com/cli/v7/configuring-npm/package-json#files