WebStorm自动编译TypeScript并发布到npm

落日映苍穹つ 2024-04-01 09:30 104阅读 0赞

## 本例中需要执行的操作 ##

1.  编译TypeScript (tsc命令)
2.  版本自增 (npm version patch命令)
3.  只将编译好的文件发布(本例中为 dist文件夹)

## 准备工作 ##

### tsconfig.json ###

本例中`outDir`字段配置为 `./dist`，即将编译好的js文件放到dist文件夹中

{
        
      "compilerOptions": {
        
        "target": "es6",
        "module": "commonjs",
        "declaration": true,
        "outDir": "./dist",
        "strict": true
      }
    }

### package.json ###

在package.json中增加两个命令

"scripts": {
        
        "pub": "echo f|xcopy package.json dist\\package.json /Y && cd dist && npm publish --access public && cd.. && rmdir dist /s /q",
        "ver": "git add . && git commit -m \"publish to npm\" && npm version patch",
      },

*  ver：表示commit当前改动，并且让`version`自增，这里会执行 2次 `git commit`后续可以把它们合并
 *  pub：表示把`package.json`文件复制到`dist`文件夹中，并进入`dist`文件夹进行发布，发布完成后删除`dist`目录。注意`npm publish`命令执行前需要登陆npm账号

## WebStorm ##

1.  点击工具栏运行按钮左边的下拉，选择`编辑配置`
2.  添加一个`npm`命令，命令选择`run`，脚本选择`pub`(即刚才配置的pub命令)
3.  在下方`执行前`中添加两个命令：
    
    1.  编译TypeScript，选择你的 `tsconfig.json`文件
    2.  npm脚本，命令`run`，脚本`ver`(即刚才配置的ver命令)
4.  保存即可

运行该命令即可按文章开头所述顺序执行

发表评论取消回复

表情：

评论列表（有 0 条评论，104人围观）

还没有评论，来说两句吧...

相关阅读

相关 WebStorm自动编译TypeScript并发布到npm

本例中需要执行的操作 1. 编译TypeScript (tsc命令) 2. 版本自增 (npm version patch命令) 3. 只将编译好的文件发布(本例中

落日映苍穹つ/ 2024年04月01日 09:30/ 0 赞/ 105 阅读

相关 TypeScript 自动编译生成 .js 文件

1. npm i -g typescript typescript 中包含 es6,es5 语法，文件是以 .ts 后缀结尾，浏览器解析不了，需要在命令行输入 `

青旅半醒/ 2023年06月06日 14:26/ 0 赞/ 3 阅读

相关发布组件到npm上面

文章目录前文一、项目准备二、npm发布 1. 发布步骤 2. 一些常见的错误三、持续集成四、删除包

心已赠人/ 2023年02月18日 10:56/ 0 赞/ 18 阅读

相关从零到发布npm包-基于TypeScript重构axios

前言此项目大量使用了TS知识，做完后项目开发使用TS基本没有问题。项目初始化利用 typescript library starter 创建项目。 ht

ゝ一纸荒年。/ 2022年11月19日 06:29/ 0 赞/ 196 阅读

相关 Vue封装组件并发布npm

`install` `Vue`的插件必须提供一个公开方法`install`，该方法会在你使用该插件，也就是 `Vue.use(yourPlugin)`时被调用。这样也就给`

布满荆棘的人生/ 2022年11月10日 01:12/ 0 赞/ 221 阅读

相关 WebStorm自动编译less

WebStorm自动编译less 1. 安装node.js和npm windows下安装node.js去Node.js官网下载安装包，手动安装。安装node.js的

古城微笑少年丶/ 2022年06月14日 08:52/ 0 赞/ 342 阅读

相关 webstorm不能自动重新编译问题

问题：项目是react+webpack的，已经设置好，页面改动一次，就会自动更新，实际却需要手动执行 npm start,偶尔也会自己更新。问题原因： syst

ゞ浴缸里的玫瑰/ 2022年05月31日 00:07/ 0 赞/ 747 阅读

相关用WebStorm开发TypeScript

为什么是TypeScript 最近在做H5的游戏，最终选定的TypeScript作为开发语言。主要是看重他有强类型和Class，作为习惯使用AS3,Java等强类型编程的

谁借莪１个温暖的怀抱￠/ 2022年05月27日 00:10/ 0 赞/ 633 阅读

相关如何开发一个npm插件，并发布到npm官网

www.npmjs.com 创建一个vue-toast-demo目录进入目录 cd vue-toast-demo npm初始化 npm init package n

╰半橙微兮°/ 2022年04月11日 11:30/ 0 赞/ 366 阅读

相关 PHPStorm配置typescript自动编译

1、自行去官网安装node.js； 2、npm工具安装typescript npm install -g typescript 查看typescript版本

清疚/ 2021年11月24日 01:38/ 0 赞/ 629 阅读