0. 简单搭建一个 ts 开发模板

最新推荐文章于 2024-06-28 17:21:23 发布

舜岳

最新推荐文章于 2024-06-28 17:21:23 发布

阅读量773

点赞数

分类专栏： TypeScript 文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/qq_41614928/article/details/121077493

版权

TypeScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

全局 typescript 编译TS文件

npm install typescript -g

全局安装typescript可以对.ts文件进行编译

tsc --init # 生成tsconfig.json
tsc # 可以将ts文件编译成js文件
tsc --watch # 监控ts文件变化生成js文件

搭建ts开发模板

目录结构：

├── build
├── src
│   └── index.ts
├── public
│   └── index.html
├── rollup.config.js // rollup 打包配置文件
├── package.json
└── tsconfig.json // ts 打包配置文件  通过： npx tsc --init  生成

通过 rollup 编译 .ts 文件比 webpack 快，所以才有 rollup

npm install rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve rollup-plugin-serve -D

package.json

{
  "name": "typescript-learn",
  "version": "1.0.0",
  "description": "TypeScript",
  "main": "dist/index.js",
  "scripts": {
    "dev": "rollup -c -w"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^13.0.6",
    "rollup": "^2.58.3",
    "rollup-plugin-serve": "^1.1.0",
    "rollup-plugin-typescript2": "^0.30.0",
    "typescript": "^4.4.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
	  "target": "es2020",
	  "module": "ESNext",
	  "sourceMap": true,
	  "esModuleInterop": true,
	  "forceConsistentCasingInFileNames": true,
	  "strict": true,
	  "skipLibCheck": true
  }
}

rollup.config.js

import path from 'path'
import serve from 'rollup-plugin-serve'
import ts from 'rollup-plugin-typescript2'
import { nodeResolve } from '@rollup/plugin-node-resolve'

export default {
  input: 'src/index.ts', // 打包入口
  output: {
    format: 'iife',
    file: path.resolve('dist/index.js'), // 打包出口
    sourcemap: true
  },
  plugins: [
    nodeResolve({ // Rollup 插件，用于在 node_modules 中使用第三方模块
      extensions: [ '.js', '.ts' ]
    }),
    ts({   // ts 打包配置
      tsconfig: path.resolve(__dirname, 'tsconfig.json')
    }),
    serve({ // rollup 开启端口服务
      open: true,
      openPage: '/public/index.html',
      port: 3000,
      contentBase: ''
    })
  ]
}

public\index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="../dist/index.js"></script>
</body>
</html>

打包

src\index.ts

入口文件如下

let myname: string = "小米";
let age: number = 18;
let bool: boolean = true;

console.log(myname, age)

执行 npm run dev 打包后的结果如下

dist\index.js

(function () {
	'use strict';

	let myname = "小米";
	let age = 18;
	console.log(myname, age);

})();
//# sourceMappingURL=index.js.map

很明显，没用到的代码被自动 tree-shaking 掉了

舜岳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录