在create-react-app中使用绝对路径import

个人学习react.js时很多都是用create-react-app这个脚手架工具来快速生成项目。create-react-app使用非常简单，而且相比vue-cli，它把复杂的配置文件都隐藏起来了，生成的项目目录极其简约，基本只有src和public。

不过太简约的话，有时想搞一些个性化的配置就会可能就比较麻烦了，而vue-cli这点就比较方便，因为它的配置文件都是暴露出来的，而且感觉vue-cli的webpack配置很值得学习参考。

之前写react导入资源都是用的相对路径，but目录比较深比较复杂时就会很蛋疼，就可能有这样的：

1
import something from "../../../file.ext"

这样的情况。

而且webpack是支持设置alias的，
然而create-react-app的webpack对我们是透明的，不能直接改webpack配置文件。

果然这么坑的事早就有人提过issue，我搜到这个。

1
2
# 根目录下
echo "NODE_PATH=src" > .env

设置了一下环境变量，发现报错了，而且确实从src目录下搜索了，但是提示没找到响应文件。比对了一下目录并没有写错。

又看了一下，发现那个issue有个关联的issue就是.env文件没生效的情况，发现目前要在npm scripts里面指定环境变量。package.json增加一条：

1
"dev": "NODE_PATH=./src npm run start",

再npm run dev，表现正常了,根据issue目前为止似乎仍没有支持.dev文件配置NODE_PATH。

不过设置NODE_PATH的话，似乎和webpack的设置别名关系不大了。NODE_PATH是nodejs在其他地方没找到模块时会尝试去NODE_PATH指定的路径中去找。

等以后发现更加科学的方式再补充。

相关补充