百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

npm + TypeScript使用workspace(npm postcss)

ztj100 2025-03-24 01:40 8 浏览 0 评论

有时候希望把某一个模块实现称为一个库,但是暂时又不希望把这个库放在另外一个仓库里面。这个时候就可以使用workspace的功能。

首先我们新建一个Node.js项目:


安装一下TypeScript编译器

npm install –save-dev typescript

package.json

{
  "name": "ts-workspace",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.7.2"
  }
}


然后初始化一下TypeScript配置。

npx tsc --init

这个时候会自动创建tsconfig.json

这是我们的主项目,接着我们要建立workspace项目。

npm init --workspace ./my-lib

这里先一路用默认值。

然后就跳入./my-lib目录,安装TypeScript编译器和初始化TypeScript配置,方法和前面一样。

完整后的目录结构如下:

接着我们在my-lib目录下面建一个index.ts,用于创建一个TypeScript接口。

export interface MyConfig {
    getName: () => string;
}

在./my-lib的package.json里面添加build脚本:

运行npm run build,就可以产生对应的index.js文件了。


TypeScript除了要产生js文件,还需要产生一个index.d.ts声明文件。

修改tsconfig.json,然后去掉”declaration”配置的注释。

再运行npm run build,就可以看到index.d.ts文件也生成了。


接着还要在my-lib文件夹里面的package.json,添加”types”字段,用于告诉TypeScript,类型声明文件是刚才生成的index.d.ts。

这样my-lib这个库就做完了。

但是要在主仓库里面使用,还需要回到主仓库,运行npm install

他会自动在主目录的node_modules目录下面建立一个my-lib的symbol link。

这样主程序就能使用my-lib这个库了。


写一小段程序使用一下my-lib暴露的那个interface。

import { MyConfig } from "my-lib";

class MyClass implements MyConfig {
    getName = () => {
        return "ABC";
    }
}

const m = new MyClass();
console.log(m.getName());


引用都没有问题。


把模块临时放在workspace里面,可以使代码更模块化,同时也为模块稳定之后,移入一个正式的单独仓库做准备。

相关推荐

使用 Pinia ORM 管理 Vue 中的状态

转载说明:原创不易,未经授权,谢绝任何形式的转载状态管理是构建任何Web应用程序的重要组成部分。虽然Vue提供了管理简单状态的技术,但随着应用程序复杂性的增加,处理状态可能变得更具挑战性。这就是为什么...

Vue3开发企业级音乐Web App 明星讲师带你学习大厂高质量代码

Vue3开发企业级音乐WebApp明星讲师带你学习大厂高质量代码下栽课》jzit.top/392/...

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

webpack、vite、vue-cli、create-vue这些都是什么?看着有点晕,不要怕,我们一起来分辨一下。...

超赞 vue2/3 可视化打印设计VuePluginPrint

今天来给大家推荐一款非常不错的Vue可拖拽打印设计器Hiprint。引入使用//main.js中引入安装import{hiPrintPlugin}from'vue-plugin-...

搭建Trae+Vue3的AI开发环境(vue3 ts开发)

从2024年2025年,不断的有各种AI工具会在自媒体中火起来,号称各种效率王炸,而在AI是否会替代打工人的话题中,程序员又首当其冲。...

如何在现有的Vue项目中嵌入 Blazor项目?

...

Vue中mixin怎么理解?(vue的mixins有什么用)

作者:qdmryt转发链接:https://mp.weixin.qq.com/s/JHF3oIGSTnRegpvE6GSZhg前言...

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署

1.创建Vue脚手架#1.在本地文件目录创建my-first-vue文件夹,安装vue-cli脚手架:npminstall-gvue-cli安装过程如下图所示:创建my-first-vue...

新手如何搭建个人网站(小白如何搭建个人网站)

ElementUl是饿了么前端团队推出的桌面端UI框架,具有是简洁、直观、强悍和低学习成本等优势,非常适合初学者使用。因此,本次项目使用ElementUI框架来完成个人博客的主体开发,欢迎大家讨论...

零基础入门vue开发(vue快速入门与实战开发)

上面一节我们已经成功的安装了nodejs,并且配置了npm的全局环境变量,那么这一节我们就来正式的安装vue-cli,然后在webstorm开发者工具里运行我们的vue项目。这一节有两种创建vue项目...

.net core集成vue(.net core集成vue3)

react、angular、vue你更熟悉哪个?下边这个是vue的。要求需要你的计算机安装有o.netcore2.0以上版本onode、webpack、vue-cli、vue(npm...

使用 Vue 脚手架,为什么要学 webpack?(一)

先问大家一个很简单的问题:vueinitwebpackprjectName与vuecreateprojectName有什么区别呢?它们是Vue-cli2和Vue-cli3创建...

vue 构建和部署(vue项目部署服务器)

普通的搭建方式(安装指令)安装Node.js检查node是否已安装,终端输入node-v会使用命令行(安装)npminstallvue-cli-首先安装vue-clivueinitwe...

Vue.js 环境配置(vue的环境搭建)

说明:node.js和vue.js的关系:Node.js是一个基于ChromeV8引擎的JavaScript运行时环境;类比:Java的jvm(虚拟机)...

vue项目完整搭建步骤(vuecli项目搭建)

简介为了让一些不太清楚搭建前端项目的小白,更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架,那vue作为三大框架主流之一,在工作中很常用。所以就以vue为例。...

取消回复欢迎 发表评论: