Rollup ESM 生成损坏的导入

Question

我想将 TypeScript React App 作为组件捆绑到 ES 模块或 UMD 中。 但是生成的 ES 包产生了一个无效的模块 js。

On 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

中设置

nodeResolve

在

rollup.config

:

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

来自旗帜的描述：

浏览器

类型：

Boolean

默认值：

false

If

true

，指示插件使用

package.json

中的浏览器模块分辨率，如果它不存在，则将

'browser'

添加到

exportConditions

，以便应用

exports

中的浏览器条件。如果是

false

，包文件中的任何浏览器属性都将被忽略。或者，可以将

'browser'

的值添加到

mainFields

和

exportConditions

选项，但是此选项优先于

mainFields

.

Answer 2

我发现在关闭 tree-shaking 后，它包含了这些仅在 node 中可用的模块，但在其上进行了 treeshaking 修复了构建并且不包含包 http、https 或 url。

似乎其中一个依赖项需要这些模块，并且在 nodeResolve 中设置 browser:true 对我没有帮助。 Tree shaking 这样做是因为它们最终没有在我的代码中使用。