如何在浏览器中汇总处理基于节点的库答案

【问题标题】：How to get rollup to deal with node based libraries in the browser如何在浏览器中汇总处理基于节点的库
【发布时间】：2022-11-02 02:38:43
【问题描述】：

我一直在尝试使用一些反应布局库。他们中的大多数似乎依赖于使用 uuid 或加密来制作随机 id。

当我尝试运行与他们一起构建的结果时，我在浏览器中收到此错误

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

我见过各种可能的解决方案，例如 this one 和 this one 但他们并没有为我解决问题，所以我必须有一个不同的问题需要不同的解决方案。

我花了大约 16 小时尝试各种事情。我什至只是放弃了一周，并使用了没有这些依赖项的库。但是，我终于遇到了使用有这个问题的库的需要，我又花了几个小时试图找出我做错了什么。

Here's a repo

我知道它看起来有点大，但它是一个 MCVE。此外，我只是想确保问题与此特定示例有关，以便任何解决方案都适合。

如果你get/make 这些文件然后

npm install
npm start

如果它有效，JS 控制台中应该没有错误，但我删除了 CSS，所以它可能不会显示任何内容。对我来说，虽然它得到了上面提到的错误。

我不能是唯一遇到这个问题的人。我看到people asking and not getting answers as well as comments seeking solutions。

package.json

{
  "name": "delme-rollup",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "module": "dist/index.js",
  "scripts": {
    "start": "rollup -c rollup.config.js -w"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^23.0.0",
    "@rollup/plugin-node-resolve": "^15.0.0",
    "@rollup/plugin-replace": "^5.0.0",
    "@rollup/plugin-typescript": "^9.0.1",
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "postcss": "^8.4.18",
    "rollup": "^3.2.3",
    "rollup-plugin-dts": "^5.0.0",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-serve": "^2.0.1",
    "tslib": "^2.4.0",
    "typescript": "^4.8.4"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "flexlayout-react": "^0.7.5"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

rollup.config.js

import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import fs from 'fs';
import postcss from 'rollup-plugin-postcss';
import livereload from 'rollup-plugin-livereload';
import serve from 'rollup-plugin-serve';

const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));

export default [
    {
        input: 'src/index.tsx',
        output: [
            {
                file: packageJson.module,
                format: 'esm',
                sourcemap: true,
            },
        ],
        // This is a hack to workaround a warning that should be fixed
        onwarn(warning, warn) {
            if (warning.code === 'THIS_IS_UNDEFINED') {
                return;
            }
            warn(warning);
        },
        plugins: [
            resolve({
                preferBuiltins: true,
                browser: true,
            }),
            replace({
                preventAssignment: true,
                values: {
                    'process.env.NODE_ENV': JSON.stringify('development'),
                },
            }),
            commonjs({
                include: /node_modules/,
                requireReturnsDefault: 'auto', // <---- this solves default issue
            }),
            typescript({ tsconfig: './tsconfig.json', sourceRoot: '/src/ui' }),
            postcss({
                minimize: true,
                sourceMap: true,
                extract: 'styles.css',
            }),
            serve({
                open: true,
                openPage: '/',
                verbose: true,
                contentBase: [''],
                host: 'localhost',
                port: 3000,
            }),
            livereload({ watch: 'dist' }),
        ],
    },
];

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "esnext",
    "jsx": "react",
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "noErrorTruncation": true,
    "declarationDir": "types",
    "emitDeclarationOnly": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
  },
  "exclude": [
    "node_modules",
    "**/*stories",
    "**/*types"
  ]
}

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="container"></div>
    <script type="module" src="dist/index.js"></script>
  </body>
</html>

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import * as FlexLayout from 'flexlayout-react';
//import 'light.css';

const json = {
    global: {},
    layout: {
        type: 'row',
        weight: 100,
        children: [
            {
                type: 'tabset',
                weight: 50,
                selected: 0,
                children: [
                    {
                        type: 'tab',
                        name: 'One',
                        component: 'panel',
                    },
                ],
            },
        ],
    },
};

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { model: FlexLayout.Model.fromJson(json) };
    }

    factory = node => {
        const component = node.getComponent();
        if (component === 'panel') {
            return <div className="tab_content">{node.getName()}</div>;
        }
    };

    render() {
        return (
            <div className="spector2">
                <div className="spector2-debugger">
                    <FlexLayout.Layout model={this.state.model} factory={this.factory} />;
                </div>
            </div>
        );
    }
}

const elem = document.createElement('div');
document.body.appendChild(elem);
const root = ReactDOM.createRoot(elem);
root.render(<App />);

【问题讨论】：

标签： javascript node.js rollupjs

【解决方案1】：

您应该首先解决终端中的问题。这就像编译错误。然后是浏览器中的，更像是运行时。

例如对我来说终端显示：

还创建了PR。这解决了类型问题，但仍然存在实现错误。

【讨论】：