1.typescript编译和TypeScript的运行环境搭建

2022-09-16  本文已影响0人  静昕妈妈芦培培

认识TypeScript

TypeScript是拥有类型的JavaScript超集,它可以编译成普通、干净、完整的JavaScript代码。

怎么理解上面的话呢?

TypeScript的特点

始于JavaScript,归于JavaScript

TypeScript是一个强大的工具,用于构建大型项目

拥有先进的 JavaScript

TypeScript的编译

TypeScript最终会被编译成JavaScript来运行,如何将其编译成JavaScript?

下面是通过TypeScript的Compiler将其编译成JavaScript的步骤

全局安装typescript

npm install typescript -g

查看typescript版本

tsc --version

编写ts文件math.ts

function sum(a: number, b: number) {
  return a + b;
}
console.log(sum(1, 4));

打开终端,进入math.ts所在目录,使用tsc把ts文件编译成js文件,

tsc math.ts

会发现在当前目录下生成了一个math.js文件

function sum(a, b) {
    return a + b;
}
console.log(sum(1, 4));
image.png

TypeScript的运行环境搭建

如果我们每次为了查看TypeScript代码的运行效果,都通过经过两个步骤的话就太繁琐了:

是否可以简化这样的步骤呢?

上面我提到的两种方式,可以通过两个解决方案来完成:

使用ts-node搭建ts环境

ts-node作用:把执行的ts文件的内容编译成js,然后直接在node环境执行。不会单独生成一个js文件
安装ts-node

npm install ts-node -g

另外ts-node需要依赖 tslib@types/node 两个包:

npm install tslib @types/node -g

现在,我们可以直接通过 ts-node 来运行TypeScript的代码:

ts-node math.ts
image.png

使用webpack搭建ts环境

1.调整项目目录和文件内容,并执行npm init自动生成 package.json文件

image.png

./src/main.ts

import { sum } from "./math";

console.log(sum(1, 4));

./src/math.ts

export function sum(a: number, b: number) {
  return a + b;
}

执行下面命令生成package.json文件

npm init

2.本地安装 webpack webpack-cli,并在项目根目录创建webpack.config.js并配置打包的入口和出口

npm install webpack webpack-cli -D

./webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

3.创建./public/index.html,生成html模板,并使用html-webpack-plugin插件指定其为html模板
本地安装html-webpack-plugin

npm install html-webpack-plugin -D

在webpack.config.js中配置,指定html模板为./public/index.html

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

4.安装ts-loader,并配置ts文件的打包规则
安装ts-loader

npm install ts-loader typescript -D

注意:ts-loader是使用typescript对ts文件进行编译的

执行下面命令在项目根目录生成tsconfig.json

tsc --init

在webpack.config.json中配置对ts文件的打包规则

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.ts', '...'] //让webpack尝试按这些后缀名顺序解析模块,默认是不解析.ts模块的
  },
  module: {
    rules: [{
      test: /\.ts$/,
      loader: 'ts-loader'
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

在package.json配置打包脚本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

执行下面命令尝试打包,可以看到在项目根目录生成了dist目录,里面是打包生成的文件

npm run build
image.png
image.png

5.但这样还是麻烦,每次修改了代码都得重新执行npm run build打包,可以使用webpack-dev-server实现热更新

npm install webpack-dev-server -D

在webpack.config.json中配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.ts', '...'] //让webpack尝试按这些后缀名顺序解析模块,默认是不解析.ts模块的
  },
  devServer: {
    hot: true,
    open: true,
  },
  module: {
    rules: [{
      test: /\.ts$/,
      loader: 'ts-loader'
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

在package.json中配置脚本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack serve"
  },

执行下面命令

npm run serve
image.png
上一篇 下一篇

猜你喜欢

热点阅读