从React中的node_modules动态导入

Question

我想像这样从node_modules导入组件。 但它不起作用。

（由create-react-app创建的项目）

import React from 'react';
const a = '@sarin/coral-button';
import(a);

这是一条错误消息。

这是一条错误消息。

这是一条错误消息。

而且我试图用custom -cra和react-app- rewired配置webpackAlias像这样

“ config-overides.js”，但我仍然收到与以前相同的错误。

module.exports = override( 
addWebpackAlias({
  ["@sarin/coral-button"]: path.resolve(__dirname, "node_modules/@sarin/coral-button"),
}),

但是，如果我静态导入它会工作。

import React from 'react';
import('@sarin/coral-button');

Answer 1

Webpack不会尝试在javascript文件中查找变量。 在您的情况下，您已使用路径定义了一些变量a。 然后，您正在使用动态导入。 在构建时，webpack将仅执行静态分析。 它不会尝试在JavaScript文件中找到变量a。 因此正确的方法是直接在动态import语句中指定路径。

import(/* webpackChunkName: "user-defined" */'@sarin/coral-button');

Answer 2

从文件动态导入讲解

这里的说明符的解释方式与导入声明中的解释方式相同（即，相同的字符串将在两个地方都起作用）。 但是，尽管说明符是字符串，但不一定是字符串文字。 因此，像import（ ./language-packs/${navigator.language}.js - ./language-packs/${navigator.language}.js ）这样的代码就可以工作-用常规的导入声明无法完成某些工作。

因此，让我们将代码更改为使用模板字符串。

import React from 'react';
const a = '@sarin/coral-button';
import(`${a}`);

我已经通过最新的create-react-app使用以下代码进行了测试，并且可以正常工作

import React from 'react';
import logo from './logo.svg';
import './App.css';

const a = './hello'
import(`${a}`).then(hello => console.log('HELLO', hello.default))

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

并更改代码样式以使用异步/等待它也可以正常工作。

import React from 'react';
import logo from './logo.svg';
import './App.css';

(async () => {
  const a = './hello';
  const b = await import(`${a}`);
  console.log(b.default)
})()


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;