Javascript 使用React供应商拆分进行汇总_Javascript_Reactjs_Rollup

Javascript 使用React供应商拆分进行汇总

javascript reactjs

Javascript 使用React供应商拆分进行汇总,javascript,reactjs,rollup,Javascript,Reactjs,Rollup,我正在尝试将汇总用作React工具集。当我可以在react中使用惰性加载时，我已经有了一个工作原型。我只使用ES6模块，稍后我将为旧浏览器集成SystemJS。我的问题是关于汇总设置。将react和react dom视为内部，然后必须提供一个manualChunk并再次将其拆分，这似乎很疯狂如果我将它们视为外部的，而不将它们分块，则会出现以下错误： Uncaught (in promise) TypeError: Failed to resolve module specifier "reac

我正在尝试将汇总用作React工具集。当我可以在react中使用惰性加载时，我已经有了一个工作原型。我只使用ES6模块，稍后我将为旧浏览器集成SystemJS。我的问题是关于汇总设置。将

react

和

react dom

视为内部，然后必须提供一个

manualChunk

并再次将其拆分，这似乎很疯狂

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

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

是否有任何方法将

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'],
};

下面是react组件设置，

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>

//src/moduleA.js
常数moduleA=‘你好’；
导出默认值{moduleA}；
//src/App.js
从“React”导入React，{Component}；
从“../package.json”导入{version}；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
导入（“./moduleA”）
。然后（（模块）=>{
console.log（module.default）；
})
.catch（错误=>{
//处理失败
});
};
render（）{
返回(
你好，世界！
这是版本：{version}
负载
);
}
}
//src/index.js
从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
ReactDOM.render（，document.getElementById（'root'））；
//html
#
导入（'/index.js'）；