1、搭建TS开发环境(利用rollup)

我门在使用ts的时候·需要将编写的ts代码转换成js 在运行

typescript这个模块 来进行文件的编译
npm install typescript -g 全局的包只能在命令行中使用 tsc

(1、)最终直接生成js 文件再运行
tsc--init 初始化ts的配置文件

(2、) 比较适合临时测试
vscode插件来实现代码的运行
code-runner 如果是js文件 内部会直接采用 node + 文件名来执行此文件,如果是ts文件 需要通过ts-node 来直接执行

(3、)通过构建工具将代码转换成js,再去运行 (webpack、rollup,esbuild)最终编译成js文件执行
rollup安装:npm i rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve -D

typescript 复制代码
//默认rollup打包的时候 回查找当前目录下的rollup.config.js文件
//采用es模块来编写配置文件

import ts from 'rollup-plugin-typescript2'
import { nodeResolve } from '@rollup/plugin-node-resolve'
import path from 'path'
import { fileURLToPath } from 'url'
import typescript from '@rollup/plugin-typescript';

//当前文件的绝对路径 file://xxxx/xxxx/xxxx

const _filename = fileURLToPath(import.meta.url) //当前文件的绝对路径
const __dirname = path.dirname(_filename) //当前文件所在的目录

//打包的配置对象
export default {
    // input: path.resolve(__dirname, 'src/index.ts'),//入口文件
    input: './src/index.ts',//项目入口
    output: {
        file: path.relative(__dirname, 'dist/bundle.js'),//打包的文件在当前目录下的dist目录
        format: 'iife',//输出的模块规范(function(){})()
        sourcemap: true,//生成sourcemap文件
        name: 'MyModule'  // 添加这一行
    },
    plugins: [
        typescript(),
        nodeResolve({ extensions: ['.js', '.ts'] }),//(第三方包的入口)入口文件 可以使js 也可以是ts
        ts({
            tsconfig: path.resolve(__dirname, 'tsconfig.json')
        })
    ]
}
相关推荐
拉不动的猪15 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程25 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸2 小时前
2、中医基础入门和养生
前端·后端
局外人LZ2 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js