妙用 `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]

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

[hupeople]

@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

[EthanLin-TWer]

过了这么久，不知道相关问题是不是有更新。分享一下我的方案。

import 一堆相对路径虽然难看，但是我用的 WebStorm 它是支持自动导入的（在使用 named export 时效果最佳），直接都不用手写，重构的时候也支持一键重命名。于是，在「重度依赖 IDE 进行管理」这个上下文中，手动 import 和手动改路径的场景都不存在了，通过 package.json alias 可能存在的方法跳不进等问题也不存在。前提是团队项目都偏向用 named export 啦，default export IDE 有时还是无力的（伟大的 Angular 永垂不朽！也祝 React 永远健康~）。

本来嘛，路径这种 trivial 的事情交给 IDE 就好了，开发者可以关注更重要的事情。

[zhongdeming428]

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

正解