示例：

Question

用例：

数据库包含每个用户可以看到的小部件名称列表
每个小部件都是一个node_module
我们需要在UI中动态加载小部件节点模块

示例：

import React from 'react'
import axios from 'axios'
import { StaticRouter,Route, Switch, NavLink } from 'react-router-dom';
const AsyncComponent = (moduleName) => {
  return require('../node_modules/' + moduleName) //This line is not working if the moduleName is mentioned at runtime, if it is statically mentioned then it works fine.
  //or something like
  return import('../node_modules/' + moduleName)

}
export default class Dashboard extends React.Component{
  state = {
    widgets : [],
    appIsMounted: false
  }

  componentDidMount(){
    axios.get('/widgets', (response) => { //DB contains list of widgets names for the specific user and there will be node_module for each widget or functionality.
      this.setState({
        widgets: response.data //list of functionalities or widgets to show in the UI
      })
    })
  }

  render(){
    return (
        <StaticRouter>
          <div>
 **strong text**               {
                    this.state.widgets && this.state.widgets.map(module => {
                        return <nav>
                            <NavLink to={`/${module}`} exact activeClassName="active">{module.module}</NavLink>
                            </nav>
                    })
                }
            </div>
            <div>
              <Switch>
              {
                this.state.widgets && this.state.widgets.map(module => {
                  return <Route path={`/${module}`} exact component={AsyncComponent.bind(this, module)} />
                })
              }
            </Switch>
            </div>
            </StaticRouter>
        )
  }
}

请让我知道是否有人遇到这个问题。

Answer 1

您不需要在模块名称的路径前面加上../node_modules。除非显式覆盖resolve配置，否则所有模块都会自动解析。
如果我理解正确的话，我也曾经遇到过同样的问题。您能否通过在Route JSX内联AsyncComponent函数来尝试一次。而且，应该是这样

const asyncComponent = bundle => (location, cb) => {
	bundle().then(component => {
		cb(null, component.default ? component.default : component);
	});
};

asyncComponent(() =>
    import(/* webpackChunkName: "CategoryLanding" */ 'pages/CategoryLandingPage/CategoryLandingPage.js')
   )

Answer 2

将此代码添加到babelLoader或Webpack配置中。

仅排除节点模块：

exclude: /node_modules/

排除节点模块和其他一些库

例如：我将使用salesforce-ux库作为我的外部库

exclude: /node_modules\/(?!(@salesforce-ux)\/).*/

Webpack在运行时在浏览器中动态加载node_module

示例：

2 个答案: