reactjs - Rollup ESM 生成损坏的导入

Question

我想将 typescript react 应用程序作为组件捆绑到 ES 模块或 UMD 中。但是生成的 ES 包会产生一个无效的模块 js。

在 bundle 上它给了我这个提示。但我找不到任何解决方案。

(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
http (guessing 'http')
...

在 esm js 包中有如下导入:

import http from 'http';
import https from 'https';
import url from 'url';
import require$$0 from 'stream';
...

function createCommonjsModule(fn) {
  var module = { exports: {} };
    return fn(module, module.exports), module.exports;
}

将其添加到浏览器后:

<script type="module" src="./index.esm.js"></script>

我收到有关缺少相对导入的错误:

Uncaught TypeError: Failed to resolve module specifier "http". Relative references must start with either "/", "./", or "../".

我的 rollup 配置肯定有错误，但我找不到位置，对任何提示都很高兴和感激。...

当然，我在我的应用程序中导入了 nodemodule，例如:

import {observer} from 'mobx-react';

但是 rollup 应该可以处理这个问题。不是吗？

这是我的 rollup.config:

import pkg from './package.json';
import nodeResolve from "@rollup/plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import image from "@rollup/plugin-image";
import styles from "rollup-plugin-styles";
import commonjs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";
import json from '@rollup/plugin-json';
import babel from '@rollup/plugin-babel';
import copy from "rollup-plugin-copy";
import del from "rollup-plugin-delete";

export default {
    input: pkg.source,
    output: [
        {
            file: pkg.module,
            format: 'es',
            sourcemap: false
        },
        {
            file: "dist/index.umd.js",
            format: 'umd',
            sourcemap: true
        },
    ],
    plugins: [
        del({targets: 'dist/*'}),
        nodeResolve({
            mainFields: ['jsnext:main', 'module', 'main'],
            dedupe: [ 'react', 'react-dom' ]
        }),
        replace({
            preventAssignment: false,
            'process.env.NODE_ENV': JSON.stringify('development'),
            __buildDate__: () => JSON.stringify(new Date())
        }),
        json(),
        typescript(),
        styles(),
        copy({
            targets: [
                {src: 'public/**/*', dest: 'dist'}
            ]
        }),
        babel({ //disabled cause WebComponent integration
            presets: ["@babel/preset-react"],
            exclude: 'node_modules/**',
            babelHelpers: 'bundled'
        }),
        commonjs(),
        image()
    ]
};

Answer 1

我有一个类似的问题(虽然使用 stream 模块，而不是 http)，对我来说，解决方案是设置 browser: true在 rollup.config 中的 nodeResolve 中:

export default [
  {
    input: '...',
    plugins: [
      nodeResolve({
        'browser': true,
      }),
      commonjs(),
    ],
    output: {
       ...
    }
  }
];

来自标志的描述:

浏览器

类型: bool 值
默认值:false

如果 true，指示插件使用 package.json 中的浏览器模块解析，并将 'browser' 添加到 exportConditions 如果它不存在，则应用 exports 中的浏览器条件。如果 false，包文件中的任何浏览器属性都将被忽略。或者，可以将 'browser' 的值添加到 mainFields 和 exportConditions 选项中，但是此选项优先于 mainFields 。