使用 React 供应商拆分汇总

san*_*oon 5 javascript rollup reactjs

我正在尝试使用 Rollup 作为 React 工具集。当我可以在反应中使用延迟加载时，我有一个工作原型。我只使用 ES6 模块，稍后我会为旧浏览器集成 SystemJS。我的问题是关于汇总设置。将reactandreact-dom视为内部似乎很疯狂，然后必须提供 amanualChunk并再次将它们分开。

如果我将它们视为外部而不是将它们分块，则会出现以下错误：

Uncaught (in promise) TypeError: Failed to resolve module specifier "react-dom". Relative references must start with either "/", "./", or "../".

Run Code Online (Sandbox Code Playgroud)

有没有办法将react和react-dom视为外部并从 CDN 引用它们？

import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import json from 'rollup-plugin-json';
import replace from "rollup-plugin-replace";

export default {
    input: ['src/index.js'],
    output: {
        format: 'esm',
        dir: 'build',
    },

    experimentalCodeSplitting: true,

    // Is there any way to avoid this?
    manualChunks: {
        'react': ['./node_modules/react/index.js'],
        'reactDOM': ['./node_modules/react-dom/index.js'],
    },
    plugins: [
        json(),
        commonjs({
            include: 'node_modules/**',
            sourceMap: false,
            namedExports: {
                './node_modules/react/index.js': ['Component','Children','PropTypes','createElement','cloneElement', 'createFactory'],
                './node_modules/react-dom/index.js': ['render'],
            },
        }),
        nodeResolve(),
        babel({
            exclude: 'node_modules/**',
        }),
        replace({
            'process.env.NODE_ENV': JSON.stringify('development'),
        })
    ],
    // If react is treated as external, how can it be loaded into this ESM module from a UMD?
    // e.g. "https://unpkg.com/react@16/umd/react.development.js"
    // external: ['react','react-dom'],
};

Run Code Online (Sandbox Code Playgroud)

这是反应组件设置，moduleA.js单击时延迟加载：

// src/moduleA.js
const moduleA = 'Hello';
export default { moduleA };

// src/App.js
import React, { Component } from 'react';
import { version } from '../package.json';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        import('./moduleA')
            .then((module) => {
                console.log(module.default);
            })
            .catch(err => {
                // Handle failure
            });
    };

    render() {
        return (
            <React.Fragment>
                <div className="App">
                    <h1>Hello, World!</h1>
                    <p>This is version: { version }</p>
                </div>
                <button onClick={this.handleClick}>Load</button>
            </React.Fragment>
        );
    }
}

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));


//html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>#</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <main id="root"></main>
<!-- How can these be referenced in the below module?
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
-->
    <script type="module">
        import('/index.js');
    </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，12 月前
查看次数：	940 次
最近记录：	6 年，12 月前