执行eject
在项目中执行 $ npm run eject
这个命令只能执行一次,而且不可逆转,它会把react-scripts 封装的一些webpack配置等全部解压到项目目录,项目结构中会多出 config
目录 和 scripts
目录,我们的需要配置的地方就在config
目录中, 其中有两个文件需要需改:webpack.config.dev.js
和 webpack.config.prod.js
文件,两个文件都是修改的同一处配置。
修改配置,添加alias别名
在webpack.config.dev.js
和 webpack.config.prod.js
文件中搜索 alias
关键词,在相关对象中添加一个键值对:'@': paths.appSrc
,此时的appSrc 就是项目的src
目录
由于技术栈时时升级,为了防止技术升级造成的无法匹配问题的现象,在此添加版本信息如下:
"devDependencies": {
"react-scripts": "^1.1.4"
},
"dependencies": {
"react": "^16.3.2"
}
此时的版本下执行 $ npm run eject
再修改上面的配置是没有任何问题的
修改导入文件的写法
好了,现在我们想要导入 src/pages/home/index.js
只需要把import的路径写成 @/pages/home
就可以了,或者也可以按照相对路径的写法导入,其中这里要说明的一些情况是如果目录中存在index.js可以直接写成目录名称,不需要写全路径,因为如果访问某一目录,它默认找的就是index.js, 就像是上面的写法,我们可以写成 @/pages/home
的形式,也可以写成 @/pages/home/index.js
的形式
最后总结
修改完毕,这样以后导入模块就方便多了!