reactjs - 如何在我的 React styleguidist 组件库中使用绝对路径？

Question

我有一个在 React 应用程序中使用的 React 组件库。组件库是使用 Styleguidist 和 webpack 设置的。我已经将 webpack 设置为使用绝对路径：

webpackConfig: {
  resolve: {
    modules: [path.resolve(__dirname, 'src/'), 'node_modules'],
  }
}

这在组件库的上下文中起作用。当我build组件库时，包看起来像这样：

/core
  /components
    /Table
    /Row

当我import将组件放入我的应用程序时，我收到一个错误：

Module not found: Can't resolve components/Row in /Users/myusername/Sites/mysite/node_modules/@mypackage/core/components/Table

我理解为什么路径在 的上下文中不匹配node_modules，但我希望 Webpack 在构建过程中转换这些导入路径。有什么我想念的吗？或者这是不可能的？

Answer 1

虽然 Styleguidist 使用 webpack，但事实证明我们使用的构建脚本没有，因此 webpack 配置无关紧要。相反，我们的构建脚本（https://www.npmjs.com/package/cod-scripts）使用 babel。

我们最终不得不添加一个单独的文件来使用包babel.config.js定义 babel 的绝对路径。babel-plugin-module-resolver

npm install babel-plugin-module-resolver --saveDev
npm install @babel/preset-react --saveDev

babel.config.js

module.exports = {
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
      },
    ],
  ],
  presets: ['@babel/preset-react'],
};