妙用 `package.json` 快速 `import` 文件（夹）

[rccoder]

前言

import router from './router';

import router from '../../router';

import router from './../../../router';

如上，或许我们在项目中经常需要引入一些文件夹，入后在路径上就会出现好多的 ../../，并且一旦换个文件夹，都得重新检出 import 是否正确

一劳永逸

目录机构

├── component
├── ....
└── router
    └── index.js

黑魔法

在 router 文件夹中 touch package.json，然后写入：

{
  "name": "@router"
}

这样，你在项目中的任何一个文件中都可以这样 import：

import router from '@router'

结语

妈妈再也不用担心复杂的路径问题啦

其他项目

这种写法目测只在 RN 中支持，其他项目曲线救国：

babel-plugin-webpack-alias

[xwzpp]

赞

[codezyc]

👍

[Rukeith]

有點看不懂＠＠
所以是在 router 的裡面加 package.json
內容是
{ "name": "@router" }

如果 router 裡面有 index.js
就可以用以下方式導入嗎？
import index from '@router/index.js'

[rccoder]

@Rukeith

是的，在目录文件夹下写 package.json

我直接 from '@router' 等于 from '../router'，也等于 from '../router/index.js

[jjeejj]

没有看明白，是不是说目录文件下面的package.json文件中的name字段相当于这个文件夹的唯一标识，当项目启动时会找所有的 package.json文件，然后去匹配？？

[lzghades]

试了一下好像不行哈，需要什么特殊处理么

[luokailuo]

@lzghades 一样不行。不太明白，router 目录下添加 package.json 文件是把 router 目录当作 module?

[rccoder]

@lzghades @Huzzbuzz 抱歉，我只在 React Native 项目中试验过 😂

刚才试了下普通项目中好像真的不行 😶

[rccoder]

其他项目曲线救国：

babel-plugin-webpack-alias

[zwhu]

如果用 webpack 的话，直接 alias 就可以了

[rccoder]

@zwhu yep

[syanbo]

@rccoder 使用这样的方法之后 WebStorm 无法跳进代码

[rccoder]

@DBshaoYan 这确实是一个问题，如果是单纯的针对 Webpack 的 alias 的话可以使用 resource root 的方式，但依旧不完美，期待以后的版本能解决这个问题吧

https://stackoverflow.com/questions/34943631/path-aliases-for-imports-in-webstorm#37135031