动态导入且未捆绑文件 [英] Dynamic import with not bundled file

问题描述

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

I have a React project bundled with Webpack.

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

I have a component that I want it to render components Dynamically. In my case, the path of the component comes from props.

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

Also, these components are not bundled in my project .js file; they are external React components/libaries.

我尝试了动态ES6导入:

I've tried the Dynamic ES6 import:

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 });
             })
    }
}

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

This doesn't work because import needs a static route.

然后我尝试了require:

Then I've tried with require:

let dynamicComponent = require(cardType);

这是行不通的，因为(我假设)Webpack试图将其查找到主捆绑包中.

Which doesn't work because (I assume) Webpack tries to find it into the main bundle.

这甚至有可能吗?

更新:看起来可以正常工作(cardType为'index.js'-一个React组件):

Update: It looks like this can work (cardType is 'index.js' - a React component):

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

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

Webpack creates a different bundle (chunk) including the code of index.js and all it's dependencies.

但这并不能真正解决我原来的问题.

But this doesn't really solve my original question.

编辑2 :上面的导入实际上忽略了最后一个var，Webpack在/lib中对每个文件进行了块化处理.

Edit 2: The import from above actually ignores the last var and Webpack makes chunks of every file inside /lib.

推荐答案

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

I finally came up with a solution.

LoadJS 库.您也可以使用 $ script .

图书馆项目(外部组件): index.js:

Library project (external components): index.js:

import App from './App';

export const MyComponentLib = {
   App
};

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配置文件(生产)中，添加:

In the library's webpack config file (production), added:

libraryTarget: 'umd',

主项目文件(main.js):

Main project file (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
                        })
                    }
                })
            }
        })
    }
}

这篇关于动态导入且未捆绑文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！