使用parcel让浏览器能直接执行ts文件

已于 2023-04-25 18:06:53 修改
阅读量303 收藏
点赞数
分类专栏： 我的typescript学习日志 文章标签： javascript json typescript 前端 npm
于 2023-04-16 18:03:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43498949/article/details/130185498
版权

文章目录

使用parcel让浏览器能直接执行ts文件

parcel是什么

Parcel 是 Web 应用打包工具，有点类似与webpack等打包工具，parcel可以帮助我们在浏览器端执行ts文件，而不需要进行额外的打包。

安装Parcel打包工具

npm install parcel-bundler --save-dev

在package.json配置parcel

在package.json中给npm添加启动项，支持启动parcel工具包

"scripts": {
	        "startparcel": "parcel ./index.html"
	      },

在html文件中引入ts文件

在这里插入图片描述
这里这个index.ts通常是入口文件

启动parcel

npm run startparcel
supmyre
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
boilerplate-ts-react-parcel
03-12
6. **开发流程**：开发时，开发者可以修改`src`目录下的React组件，Parcel会实时监控文件变化，并自动重新构建和热重载浏览器，实现快速迭代。完成开发后，可以运行打包命令，Parcel将生成优化过的生产环境代码。 7...
game-collector-ts：使用NodeReactTypescript的视频游戏收集应用
02-15
在开发过程中，开发者可能会使用Webpack或Parcel等工具进行模块打包，Babel将TypeScript代码转换为浏览器可执行的JavaScript。同时，使用 ESLint 和 Prettier 进行代码风格和格式的统一，确保团队合作的一致性。 ...
【直接运行TS文件的三种方法】
No_Name_Cao_Ni_Mei的博客
09-12 4864
4：重启后就会发现在ts文件中就会出现 run 了。3：在设置中安装安装插件后重启。
typescript可以在浏览器运行吗,浏览器支持typescript
神器榜
09-10 1737
谷歌人工智能写作项目：小发猫Typescript是JavaScript的超集，支持ES6特性并且提供了类型系统，可以编译成Javascripttypescript类型注解教程，typescript 引用。是微软开发且已经在github上开源。ES6（ES2015，ES2016等）虽然已发布，但是很多浏览器厂商对其并不是完全支持,当前我们要想使用最新的ES6特性，必须使用转换工具（如babel），才能最终运行在浏览器上。而TypeScript对ES6新特性的支持使得我们可以直接使用开发，并且不用依赖第三方工具
html文件中引入.ts文件并运行
最新发布
做一个有知识的流氓
09-27 1807
问题： 一个项目，是用TypeScript编写的，但是html中引入了.ts文件后报错了，有没有办法跳过tsc这个编译命令，不然每次都需要Tsc编译一下后再启动，有点麻烦。
TypeScript之Web开发
薛定谔的猫
01-27 291
这一块记录的是以前所学的内容，复习及温习最新所学的内容。
构建TypeScript运行环境(TS 自动重启 + TS自动运行 + Parcel自动打包)
weixin_43852916的博客
03-01 374
Ts运行环境
TS打包解包代码
10-10
1. 编译TS代码：使用tsc（TypeScript编译器）将TS文件转换为ES5或ES6的JS文件，同时生成source map。 2. 处理静态资源：使用Webpack或Rollup将CSS、图片、字体等资源打包进JS文件或单独输出。 3. 模块合并：通过模块...
ts-sleact-clone:type打字练习在实践中
04-11
8. **构建工具**：在实践中，我们可能使用Webpack、Rollup或Parcel等工具将TypeScript代码打包为浏览器可执行的JavaScript代码。 9. **测试**：TypeScript项目通常会配合Jest、Mocha等测试框架，编写单元测试和集成...
测试1
02-15
这里，`nodemon`是一个监控文件变化并自动重启服务器的工具，`ts-node-dev`则是TypeScript的运行时，它能直接执行TS代码并自动编译。`src/index.ts`是项目的入口文件。 在本地主机上，服务器通常会在端口3000上运行...
typescript
学习无止境
01-20 204
typescript 说明 typescript是javascript的超集。 ts文件中如果只有正常的js代码，可以再谷歌浏览器直接引入，否则需要先解析为js文件再引入js文件。 typescript的核心原则之一是对值所具有的结构进行类型检查。 一.安装 npm install -g typescript 检验命令 tsc -v 二.编译 tsc myTs.ts 编译结果 myTs.js 编译前后区别 js文件中，没有形参定义的类型； ts中使用的let编译为var。 配置自动编译ts文件 t
TypeScript（一）安装
qw2319205chu的博客
04-03 225
安装 TypeScript 的命令行工具安装方法如下： npm install -g typescript 以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。 编译一个 TypeScript 文件很简单： tsc hello.ts 我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以...
使用 Parcel 打包 TS 代码
weixin_43800535的博客
04-21 675
使用 Parcel 打包 TS 代码
使用parcel搭建three.js开发环境（Parcel搭建开发环境，手把手教学）
weixin_65793170的博客
03-28 722
1、在Vs Code中新建parcel_dem文件，cd进去；2、然后使用npm init命令，生成package.json文件，输入命令后，一直按回车健；3、安装Parcel依赖，生成node_modules文件；4、在package.json中，修改目标文件和输出文件......
Typescript本地浏览器调试
selfsummer的博客
08-27 700
浏览器运行TS
Typescript | ts转换到AMD在浏览器中直接运行
u011607490的博客
12-06 5654
使用ts-node就可以直接运行ts，但是vscode控制台还是不如大chrome的好用呀！所以想办法用最简单的办法让ts间接地跑在浏览器里进行调试！ 浏览器是不能直接运行ts的，所以需要转换到js。但是js又有一堆不同的规范。。 ts可以转换的目标规范有很多，比如es6，commonjs，amd等等。 但是转换到es6时，会有浏览器无法兼容的import关键字，还要再用厚重的babel转。...
使用Parcel打包TS代码，这可能是学习TS阶段最简单的打包工具
一碗周
12-07 410
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ Parcel介绍 Parcel是一个和Webpack类似的一个打包工具，与之不同的是可以使用Parcel不需要任何的配置，可以帮助我们快速打包TypeScript代码，关于Parcel的使用，可以参考???? 快速开始 (parceljs.org) 使用Parcel打包TS代码 初始化项目 npm init -y tsc --init 将Parcel下载的项目中，示例代码如下： npm i -D pa
TypeScript - 浏览器中运行TS
小多的博客
10-30 2095
注意：浏览器中只能运行 JS，无法直接运行 TS，因此，需要将 TS 转化为 JS 然后再运行 浏览器中运行 TS 的步骤： 使用命令 tsc index.ts 将 ts 文件转化为 js 文件。 在页面中，使用 script 标签引入生成的 js 文件（注意是 js 文件）。<script src="./index.js"></script> 问题：每次修改 ts 文件后，都要重新运行 tsc 命令将 ts 转化为 js 。 解决方式：使用 tsc 命令的监视模式-----
parcel 打包编译ts
天天的博客
11-30 340
1 安装yarn npm i yarn -g 2， 安装parcel yarn add --dev parcel@next 3,使用 他会自动将ts 变成 js 它自动编译的js 行，使用就到这里，大家加油
如何在html文件中使用npm下载的插件
05-31
打包工具可以将npm插件打包成浏览器可识别的JavaScript文件。常用的打包工具有Webpack、Parcel、Rollup等。在命令行中运行 `npm install webpack -g` 命令来安装Webpack打包工具。 3. 配置打包工具。在项目根目录下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值