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

最新推荐文章于 2025-03-07 17:06:56 发布

转载最新推荐文章于 2025-03-07 17:06:56 发布 · 313 阅读

文章标签：

#json #javascript #ViewUI

本文介绍了一种简化项目中路径导入的方法，通过在特定文件夹内创建一个package.json文件，并指定其名称为 '@router'，可以在项目的任何位置使用 'import router from '@router';' 的方式来替代复杂的相对路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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'

结语

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

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33922670

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

npm系列：package.json

感恩、奋进、自信

09-12

3739

1、关于packag.json的基础知识 https://mp.weixin.qq.com/s/B3oppFdPYi6KD1zJhdv3XQ 2、npm发包流程 https://zhuanlan.zhihu.com/p/136603951 3、sh: vue-cli-service: command not found https://blog.csdn.net/Eva3288/article/details/106380896/ 一、在开发npm包，或者库的时候，package.j...

前端模块化-理解package.json中的模块化配置

逍遥的前端笔记

08-08

1142

本文总结了package.json中与模块化相关的配置，包括main、browser、type、module、jsnext:main以及exports字段的用途和使用方法

参与评论您还未登录，请先登录后发表或查看评论

check-imports:检查JS文件中的导入并更新package.json依赖项

03-11

支票进口 import from声明中检查import from ， import并require调用，然后从package.json文件中更新或删除package.json依赖项（如果以下所述的update选项设置为true ，否则只会通知您）。与单包装模块以及具有多个package.json文件的大型项目（例如，如果您有lerna提供支持的）一起使用时，都可以。 TL; DR 安装： npm i -D check-imports并使用： npx check-imports 。怎么运行的该库通过给定路径获取所有.js，.jsx，.ts文件；通过建立他们的AST树；从import from ， require() ， import()检索导入路径；运行一些过滤器和映射：忽略相对路径；忽略内置的child_process模块，例如path ， fs ， chi

Node.js中package.json文件

Learn-anything.cn

11-16

823

一、package.json 文件的属性 name ：在包中使用命名导入时相关。也被包管理器用作包的名称。 main ：加载包时的默认模块； type ：指定 .js 文件选择 CommonJS 或 ES 标准加载； exports ：包导出和条件导出。可限制包内子模块的导出； imports ：包导入，供包本身内的模块使用。二、参考文档 modules-packages - Node.js 官方文档 package.json - npm 官方说明 p

深入浅出 package.json

热爱可抵岁月漫长

10-24

1048

深入浅出 package.json

js读取外部json指定字段值完整代码_关于 package.json 你知道多少？

weixin_39986178的博客

11-22

381

在 Node.js 中，模块是一个库或框架，也是一个 Node.js 项目。Node.js 项目遵循模块化的架构，当我们创建了一个 Node.js 项目，意味着创建了一个模块，这个模块必须有一个描述文件，即 package.json。它是我们最常见的配置文件，但是它里面的配置你真的有详细了解过吗？配置一个合理的 package.json 文件直接决定着我们项目的质量，本章就带大家了解下 ...

nodejs 中读取 package.json 文件内容

ZhaoQM_script的博客

10-06

4593

在准备发布一个自己配置的 cli 项目时遇到了一个问题，就是当我使用common.js规范引入node_modules文件 const program = require("commander"); const download = require("download-git-repo"); const inquirer = require("inquirer"); const ora = require("ora"); const chalk = require("chalk"); const packa

package.json中main，module，exports三种方式的使用，自定义入口文件index.js

05-07

在JavaScript的模块化开发中，`package.json` 文件起着至关重要的作用，它定义了项目的元数据，并指定了模块的入口文件。对于Vue.js项目，尤其是由`@vue/cli`生成的Vue3项目，`package.json`中的`main`、`module`和`...

gulp-config-sync:自动同步 bower.json 和 package.json

06-07

在每个配置文件（package.json、bower.json、component.js...）中同步版本、名称、描述、关键字...。默认情况下， package.json 用作真实来源，但您可以指定任何来源和任何要同步的字段。仅同步指定的字段。 ...

node.js 加载包 package.json

沈纵情

04-28

2350

目录结构 lib 、bin、test 包和package.json全部放在package包下 { "main":"./lib/package.js" } package.js exports.hello = function() { console.log("test package"); } getPackage.js var pack = require("./

package.json 文件详解

ballzy的博客

05-08

277

参考文：https://blog.csdn.net/weixin_44135121/article/details/91674772 对小白很有利，可以简单明白在讲什么

package.json配置

m0_75082307的博客

01-26

246

"preinstall": "npx only-allow pnpm", // 只允许使用pnpm安装依赖包。

Vue通过import引入本地json文件

qq_24243695的博客

01-30

9514

import detail from '@/json/learn.json' import detail from '../json/learn.json' // 这里detail不用{}包裹 mounted(){ console.log(detail) }

package.json配置详解

梅花寺

04-04

4748

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。有需要的小伙伴，可以点击下方卡片领取，无偿分享。

前端 - vue - - import引入报错 require引入不报错 package.json中type的用法延迟导入资源

yky1071442177的博客

03-07

519

延迟导入资源昨天面试被问到了没答出来今天特意来学习.."type":"module" // 项目中的 .js 文件将默认被视为 ESMAScript 模块 (ESM/ES6)。 //未定义type 项目中的 .js 文件将默认被视为 CommonJS 模块 (CJS)。

ProjectOne（02） - 创建一个package.json文件

abb的码农部落格

02-19

1222

2016.02.19 改了一下原来的那篇博客的标题。从《随便写点什么（01） - 先来搭框架吧》改为ProjectOne啦。以后就不再赘述了。首先，一个项目肯定得有一个package.json吧？这个东西是用来管理这个项目相关的依赖包的，

前端项目中的package.json文件常用配置项的作用

qq_51416940的博客

08-27

2782

今天我们简单了解了 package.json 的常见配置。有了这些知识，我敢说绝大多数项目的 package.json 你都能毫无压力的阅读。但 package.json 里的内容远不止如此，比如 semver 规范，入口文件，项目依赖等都还有很多值得深入的内容，认识他们只是第一步。

TypeScript 中的 package.json 和 tsconfig.json 配置介绍

REID丶Beginner的博客

09-03

7253

3、main：项目发布时，默认会包括 package.json，license，README 和main 字段里指定的文件，因为 main 字段里指定的是项目的入口文件，在 browser 和 Node 环境中都可以使用。只要遇到 .mjs 文件，就认为它是 ES 模块。1、files：项目在进行npm发布时，可以通过files指定需要跟随一起发布的内容来控制npm包的大小，避免安装时间太长，般情况下，files 里会指定构建出来的产物以及类型文件，而 src，test 等目录下的文件不需要跟随发布。

package.json 常用配置解读

m0_50823463的博客

03-13

1193

这里介绍一些常见配置，我把它们分为了 7 大类：描述配置文件配置脚本配置依赖配置发布配置系统配置第三方配置。

mjs 如何引入package.json文件