npm【1】package.json中workspace详解

这篇具有很好参考价值的文章主要介绍了npm【1】package.json中workspace详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

在库的开发过程中,如果每次改动我们都将项目发布到npm或者私库上再下载进行调试未面太过于麻烦。通过npm项目中的package.json进行软链接,可以非常方便的看到我们的开发库在被项目使用后的具体情况。


node版本要求

version:16+


案例

1. 建立目录

+ wrap
	|-lib //库
	|-project //项目

2. 初始化

cd wrap/lib;
> wrap/lib npm run init -y
> wrap/project npm run init -y

3.修改project/package.json

{
  "workspaces": [
    "../lib" //路径需要和主相对应,npm i 之后会在当前项目的node_modules中生成一个lib的软连接,指向../lib
  ],
  "keywords": [],
}

3.修改lib项目

//lib
+ |-index.js
//lib/index.js
module.exports=()=>{
	console.log("test index lib")
}
// 修改lib/package.json
{
  "name": "lib",
  "version": "1.0.0",
  "main": "index.js", // 设置lib库的主文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {},
  "description": ""
}

4.使用

// project/index.js
const test =require('lib');// 在node_modules中生成的文件名是lib所以直接引入
test();// 使用

思考

1.建立软连接后,使用时引入的包名由谁决定?

在使用时引入的包名由被引用的文件的package.json的name决定

// lib/package.json
{
  "name": "lib", // 由它决定
}
2.更改包名后是否需要刷新包名?

在更改包名之后要执行npm i刷新包名

// lib/package.json
{
  "name": "lib" => "lib-name2"
}
> project 
> npm i || npm i lib-name2 || npm i 其他依赖包名
// project/index.js
const test =require('lib-name2');
test();// 使用
3.更改内容后是否需要手动刷新

只更改内容无需手动刷新,workspaces只是做了一个目录软连接,将文件夹lib软连接至project/node_modules内。而非拷贝了一个副本。文章来源地址https://www.toymoban.com/news/detail-670439.html

到了这里,关于npm【1】package.json中workspace详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端工程化详解——理解与实践前端工程化

    前言: 前端工程化一直是一个老生常谈的问题,不管是面试还是我们在公司做基建都会经常提到前端工程化,那么为什么经常会说到前端工程化,并没有听过后端工程化、Java工程化或者Python工程化呢?我们理解的前端工程化是不是一直都是Webpack的性能调优,或者是一个cli工

    2024年02月02日
    浏览(76)
  • npm【1】package.json中workspace详解

    在库的开发过程中,如果每次改动我们都将项目发布到npm或者私库上再下载进行调试未面太过于麻烦。通过npm项目中的package.json进行软链接,可以非常方便的看到我们的开发库在被项目使用后的具体情况。 version:16+ 1. 建立目录 2. 初始化 3.修改project/package.json 3.修改lib项目 4

    2024年02月11日
    浏览(38)
  • 前端工程化 搭建私有组件库 组件从开发到发布私有npm仓库的全过程

    前言 基于Vue3.0 + TS的组件从开发组件库到发布私有npm仓库的全过程 环境 这里列出本文所使用的环境版本 vue 3.0 vue/cli 4.5.9 nodeJs 14.15.1 npm 6.14.8 vue --version @vue/cli 4.5.9 npm -v 6.14.8 node -v v14.15.1 步骤 创建项目 使用 vue-cli 创建一个 vue3 项目,假设项目名为 avatar-ui-vue vue create avatar-u

    2024年02月02日
    浏览(130)
  • 前端工程化相关

    知道软件包名,拿到源码或者路径的方法 在浏览器输入以下内容,就可以找到你想要的。。。 unpkg.com/输入包名 ESM特性清单: 自动采取严格模式,忽略“use strict” 每个ESM模块都是单独的私有作用域; ESM是通过CORS去请求外部JS模块的 ESM的script标签会延迟执行脚本,就要有

    2024年01月17日
    浏览(95)
  • 前端工程化

    手把手带你走进Babel的编译世界 - 掘金 (juejin.cn) 我们所写的代码转换为机器能识别的一种 树形结构, 本身是由一堆节点(Node)组成,每个节点都表示源代码中的一种结构。 不同结构用类型(Type)来区分,常见的节点类型有Identifier(标识符),Expression(表达式),VariableDeclarat

    2023年04月11日
    浏览(92)
  • 前端工程化-VUE

    高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。 Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻

    2024年02月08日
    浏览(71)
  • 什么是前端工程化?

    前端工程化是一种思想,而不是某种技术。主要目的是为了提高效率和降低成本,也就是说在开发的过程中可以提高开发效率,减少不必要的重复性工作等。 tip 现实生活举例 建房子谁不会呢?请几个工人一上来就开始弄,在建筑的过程中缺了材料就叫个工人去买,发现工期

    2024年02月15日
    浏览(77)
  • Ajax及前端工程化

    Ajax:异步的js与xml。 作用: 1、通过ajax给服务器发送数据,并获得其响应的数据。 2、可以在不更新整个网页的情况下,与服务器交换数据并更新部分网页的技术。  1、准备数据地址  2、创建XMLHttpRequest对象,用于和服务器交换数据  3、向服务器发送请求  4、获取服务器响

    2024年02月12日
    浏览(62)
  • 前端工程化与webpack

    能够说出什么是前端工程化 能够说出webpack的作用 能够掌握webpack的基本使用 了解常用plugin的基本使用 了解常用loader的基本使用 能够说出Source Map的作用 前端工程化 webpack的基本使用 webpack中的插件 webpack中的loader 打包发布 Source Map 1.1小白眼中的前端开发vs实际的前端开发 实际

    2024年02月13日
    浏览(70)
  • 前端工程化知识系列(9)

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 持续性能监控和自动化性能优化在前端开发中非常重要。以下是一些相关工具和实践: 性能监控工具 :工具如Google Lighthouse、WebPageTest、PageSpeed Insights等可以

    2024年02月07日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包