未捆绑文件的动态导入

IT技术 javascript reactjs webpack ecmascript-6 dynamic-import
2021-05-14 08:56:49

我有一个与 Webpack 捆绑在一起的 React 项目。

我有一个组件，我希望它动态地呈现组件。就我而言，组件的路径来自 props。

此外，这些组件没有捆绑在我的项目 .js 文件中；它们是外部 React 组件/库。

我试过动态 ES6 导入：

componentWillReceiveProps(nextProps){
    if(nextProps.pagesData && this.props.pagesData !== nextProps.pagesData && nextProps.pagesData.get('cards').count() > 0){

        // Getting the first card from the Immutable object
        let card = nextProps.pagesData.getIn(['cards', 0]);

        // Getting the cardType which can be: '/path/index.js'
        let cardType = card.get('card_type');

        // ES6 Dynamic import
        import(cardType)
            .then(module => {
                 this.setState({ asyncCard: module.default });
             })
    }
}

这不起作用，因为导入需要静态路由。

然后我试过要求：

let dynamicComponent = require(cardType);

这是行不通的，因为（我假设）Webpack 试图在主包中找到它。

这甚至有可能做到吗？

更新：看起来这可以工作（cardType 是“index.js”——一个 React 组件）：

import(`/home/user/_apps/module/react-module/lib/${cardType}`)

Webpack 创建了一个不同的包（块），包括 index.js 的代码及其所有依赖项。

但这并不能真正解决我最初的问题。

编辑 2：从上面的导入实际上忽略了最后一个 var 并且 Webpack 在 /lib 中制作每个文件的块。

1个回答

我终于想出了一个解决方案。

加载JS库。您也可以使用$script。

库项目（外部组件）：index.js：

import App from './App';

export const MyComponentLib = {
   App
};

应用程序.jsx：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

export default class App extends Component {
   render() {
      return (
         <div className="App">
             <header className="App-header">
                 <img src={logo} className="App-logo" alt="logo" />
                 <h1 className="App-title">Welcome to React</h1>
             </header>
             <p className="App-intro">
                 To get started, edit <code>src/App.js</code> and save to reload.
             </p>
         </div>
      );
   }
}

在库的 webpack 配置文件（生产）中，添加：

libraryTarget: 'umd',

主项目文件（main.js）：

componentWillReceiveProps(nextProps){
    if(nextProps.pagesData && this.props.pagesData !== nextProps.pagesData && nextProps.pagesData.get('cards').count() > 0){

        // Getting all asyncCards from state
        let currentCards = cloneDeep(this.state.asyncCards);

        // Immutable "get" function - getting cards from nextProps
        nextProps.pagesData.get('cards').forEach(card => {

            // Getting card_type, which in this case is the filename
            let cardType = card.get('card_type');

            // Do we have this card already in the state object?
            if(!hasIn(currentCards, cardType)) {

                // AsyncLoading the card file
                loadjs(`/custom/1/${cardType}.js`, cardType, {
                    success: () => {

                        // Cloning App function (the component)
                        currentCards[cardType] = window.MyComponentLib.App.bind({});

                        this.setState({
                            asyncCards: currentCards
                        })
                    }
                })
            }
        })
    }
}
其它你可能感兴趣的问题
上一篇X 和 Y 归位问题 下一篇试图将 webpack 推送到 gh-pages