什么是typeScript:
是以javaScript 为基础构建的语言，是javaScript 的超集，扩展了js 并添加了类型。
typeScript 的优缺点:
优点：
- 提升代码的可读性和可维护性
- 编译器中的友好提示，在编译阶段就能检查类型发现大部分错误
- 保证原有类型的基础上增加了更多的类型
- 解决了兼容性问题 ，可以编译成不同版本的js
缺点：
- 需要一些学习成本
- 增加开发时的工作量
tsc TypeScript 编译器
安装 tsc
npm i -g typescript
新建 hello.ts 文件
console.log("hello")
编译ts 文件, 执行命令
tsc hello.ts
运行命令， 编译完成会生成一个同名的js 文件， 编译成功不会有任何提示，编译报错后会提示对应的错误。
想要在监听到文件改变之后自动编译 ts 文件 执行
tsc hello.t -w
使用tsc 文件名 只能编译该文件，如果想使用tsc 来编辑所有的文件,就需要创建tsconfig.json来监听
以下是对tsconfig.json配置介绍
{
/* 哪些文件需要编译*/
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
],
"compileOnSave": true,
"compilerOptions": {
"target": "es6", // 编译的 js 版本 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext'
"module": "amd", // 指定模块化的规范
"lib":[],
"outDir": "./dist", // 编译好的文件放哪里
"outFile": "./dist/index.js", // 编译完合并为一个js 文件
"allowJs": false, // 是否要编译 js 文件
"checkJs": false, // 是否检查 js 文件语法
"removeComments": true, // 是否移除注释
"strict": false, // 严格检查都开启
"noEmit": false,// 不生成编译后产生的文件
"noEmitOnError": false,// 编译后有错时不生成编译文件
"noImplicitAny": true, // 不指定参数类型时，默认类型为 any,true 为隐式类型不为any
"preserveConstEnums": true,
"sourceMap": true
},
}
使用webpack 来打包ts
- npm init
- npm install -D webpack webpack-cli typescript ts-loader
- 设置webpack.config,js,配置ts-loader
const path = require("path");
module.exports = {
// 入口文件
entry: "./src/index.ts",
// 打包文件目录
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
module: {
rules: [{ test: /\\.ts$/, use: "ts-loader", exclude: "/node_modules/" }],
},
};
- 添加并执行webpack 命令
"scripts": {
"build": "webpack"
},
npm run build
打包完成后dist目录下出现bundle.js 文件
配置babel-loader 兼容不同版本的浏览器
npm install -D @babel/core @babel/preset-env babel-loader core-js
配置babel-loader
module.export ={
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "babel-loader", // 设置 babel 来兼容不同浏览的的js版本，将es6...等代码转成es5,在浏览器环境中运行
options: {
presets: [
[
"@babel/preset-env", // 指定bebel 编译的环境
{
useBuiltIns: "usage", //babel 编绎的时候不用整个 polyfills , 只加载使用 polyfills，可以减少包的大小。
corejs: 3,
targets: {
chrome: "58", // 兼容的目标浏览器
ie: "11",
},
},
],
],
},
},
"ts-loader",
],
exclude: "/node_modules/",
},
],
}
在浏览器中执行文件
安装 html-webpack-plugin ,设置webpack plugin
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({ template: "./src/index.html" }), // 定义网页模板
],
}
编辑代码实时热更新
添加并执行 npm run start 命令,在文件发生变化时 可实时更新浏览器
npm install -D webpack-dev-server
"scripts": { "build": "webpack", "start": "webpack server --open" },
相关文章
