在Create React App中配置全局导入服务及JSX全局导入方案问询

嘿，我来帮你搞定这个路径导入的麻烦事儿！你提到的两种需求——设置全局导入服务、用短路径代替冗长的相对导入，其实都有很成熟的解决方案，下面我一步步给你讲：

最推荐：用jsconfig.json/tsconfig.json配置路径别名（无需修改Webpack） #

Create React App原生支持通过配置文件里的paths字段设置路径别名，这是最简单、最安全的方式，不用折腾Webpack配置，还能让编辑器自动补全路径。

• 如果你是纯JavaScript项目：
  在项目根目录新建一个jsconfig.json文件，内容如下：

{
  "compilerOptions": {
    "baseUrl": "src", // 把src设为基础路径
    "paths": {
      "NavigationService": ["helpers/NavigationService"], // 直接映射到你的服务文件
      // 要是想给整个目录设别名也可以，比如：
      // "@helpers/*": ["helpers/*"]
    }
  },
  "include": ["src"] // 只作用于src目录下的文件
}

• 如果你是TypeScript项目：
  直接修改项目根目录的tsconfig.json，在compilerOptions里添加baseUrl和paths：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "NavigationService": ["helpers/NavigationService"],
      "@helpers/*": ["helpers/*"]
    },
    // 保留你原来的其他配置...
  }
}

配置完之后，你就能直接写import { Navigation } from 'NavigationService'，完全不用再写那一长串../../../../../../的相对路径了！

用package.json实现？可行但不推荐 #

你问能不能通过package.json搞定，其实是可以的，但体验不如上面的方法：

在项目根目录的package.json里添加exports字段：

{
  "name": "你的项目名称",
  "exports": {
    "./NavigationService": "./src/helpers/NavigationService.js"
  },
  // 保留其他原有配置...
}

然后导入的时候要写成import { Navigation } from '你的项目名称/NavigationService'，虽然比长路径短，但不如直接用别名简洁，而且如果项目名称变了还要改，所以更推荐第一种方法。

复杂需求：修改Webpack配置（无需Eject） #

如果你有更复杂的自定义需求，必须修改Webpack的resolve.alias，CRA默认不暴露配置文件，你可以用这两种方式：

1. 用craco（最常用的CRA配置修改工具） #

• 先安装craco：npm install @craco/craco --save-dev
• 在根目录新建craco.config.js：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      'NavigationService': path.resolve(__dirname, 'src/helpers/NavigationService'),
    },
  },
};

• 最后修改package.json里的脚本，把react-scripts换成craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

2. 谨慎使用Eject #

如果你不怕失去CRA的官方更新支持，可以运行npm run eject暴露所有配置文件，然后在config/webpack.config.js里找到resolve.alias部分添加：

resolve: {
  alias: {
    // 保留原有别名...
    'NavigationService': path.resolve(__dirname, '../src/helpers/NavigationService'),
  },
},

但 eject 是不可逆的操作，一定要谨慎！

内容的提问来源于stack exchange，提问作者Michał J. Gąsior