Question

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

（通过create-react-app创建的项目）

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

This is an error message.

并且我尝试在

中使用 customize-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）这样的代码将可以工作，而使用通常的导入声明则无法完成。

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

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;

从React中的node_modules动态导入

2 个答案: