如何从导入文件名中删除路径以响应 NPM 构建答案

【问题标题】：How to remove path from import filenames in react for NPM build如何从导入文件名中删除路径以响应 NPM 构建
【发布时间】：2019-12-01 22:15:38
【问题描述】：

我喜欢将我的文件保存在项目中的有序文件夹中。例如，有一个 Auth 文件夹用于 auth 相关组件，一个 Components 文件夹用于可重用组件，一个 Profile 文件夹用于用户配置文件相关组件等。

不必在创建新文件夹时为所有文件夹设置别名，也不必为所有导入引用完整的文件路径，我希望能够简单地声明以下内容：

import MyComponent from 'MyComponent';

我想这可以通过某种预编译命令来完成，将 src 目录结构展平到一个只包含我所有文件的新文件夹中，但我不知道该怎么做（或者如果有更好的方法）。

我也知道这可能意味着我的文件名需要是唯一的，这对我来说不是问题。

【问题讨论】：

我认为您必须使用 gulpjs 或 gruntjs 或 webpack 将所有组件编译到 build.js 文件中
查看stackoverflow.com/questions/50132624/…

标签： reactjs npm webpack build create-react-app

【解决方案1】：

你可以使用 Webpack 的resolve.alias。 https://webpack.js.org/configuration/resolve/

创建别名以更轻松地导入或需要某些模块。

例子：

// webpack.config.js (or whatever)
module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

现在你可以输入例如import Foo from 'Utilities/Foo' 就好像您输入了模块的完整路径名 (src/utilities/Foo)

【讨论】：