在React

Question

我的React js项目中有一些常见的Rract组件，如Alert，Prompt，Panel等。我为我的应用程序使用模块化文件夹结构，并希望在我的模块中重用这些常用组件。

有没有办法使用node_modules或es6导入方式导入这些模块？

我想要实现的目标是：

从＆＃39; my-libs＆＃39;;

导入{Alert，Panel}

我不想要相对的路径，因为我可能正在嵌套我的模块/子模块。

我需要的是一个更干净，路径不敏感的导入，使用es6 / webpack（ProvidePlugin =？）。

非常感谢任何帮助。

Answer 1

我在这种情况下设置了别名。

resolve: {
  root: path.resolve(__dirname),
  alias: {
    '@components': 'src/components',
    '@controls': 'src/controls',
    '@css': 'src/css',
    '@img': 'src/img',
    '@lang': 'src/lang',
    '@layouts': 'src/layouts',
  },
},

我用我的别名作为前缀，以便它清楚我要求我自己的组件，而不是npm包。

设置别名后，我可以省略./，../，../../或指定组件位置所需的其他内容

注意我使用Webpack进行捆绑，但我确信它也适用于Browserify。

Answer 2

有一点要记住Andreyco的评论，如果你是服务器端渲染而不捆绑服务器代码，这将无法工作。据我所知，节点本身没有等效的别名功能。