使用 rollup-plugin-postcss 生成的 ESM 库抛出找不到模块 '../node_modules/style-inject/dist/style-inject.es.js'答案

【问题标题】：ESM library generated with rollup-plugin-postcss throws Cannot find module '../node_modules/style-inject/dist/style-inject.es.js'使用 rollup-plugin-postcss 生成的 ESM 库抛出找不到模块 '../node_modules/style-inject/dist/style-inject.es.js'
【发布时间】：2021-08-31 15:41:10
【问题描述】：

我们正在维护一个使用 Rollup 导出 ESM 模块的内部库。我们最近刚刚切换到使用 CSS 模块，我们使用 rollup-plugin-postcss 进行设置。我们希望将这些样式注入头部，而不是拥有一个外部文件。

我们构建的包生成 ESM 文件：

import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';

然后我们的消费库失败了

 Uncaught Error: Cannot find module '../node_modules/style-inject/dist/style-inject.es.js'

我希望 ESM 导出到 import styleInject from 'style-inject' 和样式注入作为依赖项包含在 package-lock.json 中。对于库的使用者来说，使用 CSS 模块并注入头部的正确方法是什么？

rollup.config.js

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 postcss from 'rollup-plugin-postcss';
import pkg from './package.json';
import fg from 'fast-glob';
import path from 'path';

export default [
  {
    input: 'src/index.js',
    external: external(),
    output: [
      {
        name: '@my/packageName',
        file: pkg.module,
        format: 'es',
        sourcemap: true,
      },
    ],
    plugins: [
      {
        name: 'watch-external',
        async buildStart() {
          const files = await fg(['src/index.d.ts', 'playground/**/*']);
          for (let file of files) {
            this.addWatchFile(path.resolve(file));
          }
        },
      },
      json(),
      postcss({
        modules: true,
      }),
      babel({
        exclude: /node_modules/,
        babelHelpers: 'runtime',
        babelrc: false,
        presets: [
          [
            '@babel/preset-env',
            {
              modules: false,
              useBuiltIns: 'entry',
              corejs: 3,
              targets: {
                ie: 11,
              },
            },
          ],
          '@babel/preset-react',
        ],
        plugins: [
          '@babel/plugin-transform-runtime',
          '@babel/plugin-proposal-class-properties',
          '@babel/plugin-proposal-export-namespace-from',
        ],
      }),
      commonjs(),
    ],
  },
];

function external() {
  const { dependencies = {}, peerDependencies = {} } = pkg;

  const externals = [
    ...Object.keys(dependencies),
    ...Object.keys(peerDependencies),
  ];

  return id =>
    // match 'lodash' and 'lodash/fp/isEqual' for example
    externals.some(dep => id === dep || id.startsWith(`${dep}/`));
}

【问题讨论】：

标签： rollup css-modules es6-modules

【解决方案1】：

库中有一个bug，其中导入是相对的，而不是模块名称。

有一个open pr，但该库看起来不再维护。 cmets中有两种推荐的解决方案：

【讨论】：