TypeScript实战-02-环境搭建HelloWorld

最新推荐文章于 2023-04-28 07:46:27 发布

BraveWangDev

最新推荐文章于 2023-04-28 07:46:27 发布

阅读量732

点赞数

分类专栏：【完结】TypeScript 基本语法与应用文章标签： TypeScript

本文链接：https://blog.csdn.net/ABAP_Brave/article/details/100654653

版权

【完结】TypeScript 基本语法与应用专栏收录该内容

26 篇文章 20 订阅

订阅专栏

一,前言

上一篇对TS做了简单介绍,
在对TS功能进行演示前,首先需要搭建一个TS基础项目,并实现简单的自动打包构建

1,创建项目
2,使用webpack实现多环境构建
3,配置入口和启动命令
4,启动服务和打包构建演示

环境: nodeJs
IDE: VSCode

二,创建项目

1,新建ts_in_action文件夹,并执行npm命令,生成package.json:

npm init -y

BravedeMacBook-Pro:ts-in-action brave$ npm init -y
Wrote to /Users/brave/Desktop/TypeScript实战/ts-in-action/package.json:

{
  "name": "ts-in-action",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2,有了package.json后,全局安装ts依赖,可在任何位置使用tsc命令

npm i typescript -g

BravedeMacBook-Pro:ts-in-action brave$ sudo npm i typescript -g
Password:
/usr/local/bin/tsserver -> /usr/local/lib/node_modules/typescript/bin/tsserver
/usr/local/bin/tsc -> /usr/local/lib/node_modules/typescript/bin/tsc
+ typescript@3.6.2
added 1 package from 1 contributor in 4.012s

3,创建typescript配置文件tsconfig.json

tsc --init

BravedeMacBook-Pro:ts-in-action brave$ tsc --init
message TS6071: Successfully created a tsconfig.json file.

4,创建ts文件

新建src/index.ts

let hello : string = 'Hello TypeScript'

5,编译ts文件

执行编译命令:

tsc ./src/index.ts

生成src/index.js

var hello = 'Hello TypeScript';

6,比较编译前后的区别

将let关键字替换成了var,并去掉了ts的: string 类型注解

也可以使用上篇提到的,官网的playGround来查看编译后的js文件

http://www.typescriptlang.org/play/

三,使用webpack实现多环境构建

安装webpack, webpack-cli, webpack-dev-server:

npm i webpack webpack-cli webpack-dev-server -D

新建build目录(与src目录同级),存放多环境配置文件:

为了工程的可维护性,将开发环境,生产环境,公共配置,分开书写,最后通过插件进行合并

build/webpack.base.config.js: 公共环境配置
build/webpack.config.js: 所有配置文件的入口
build/webpack.dev.config.js: 开发环境配置
build/webpack.pro.config.js: 生产环境配置

公共环境 : build/webpack.base.config.js:

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

module.exports = {
    entry: {
        'app': './src/index.ts'
    },
    output: {
        filename: 'app.js'
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [{
                    loader: 'ts-loader'
                }],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/tpl/index.html'
        })
    ]
}

本地安装 ts-loader 和 typescript:

npm i ts-loader typescript -D

本地安装 htmlWebpackPlugin

npm i html-webpack-plugin -D

功能:通过模板自动生成网站首页,将输出文件嵌入到文件中

创建src/tpl/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TypeScript</title>
</head>
<body>
    <div class="app"></div>
</body>
</html>

开发环境 : build/webpack.dev.config.js

module.exports = {
	devtool: 'cheap-module-eval-source-map'
}

开发环境下的sourcemap官方推荐配置:

cheap:
	sourcemap会忽略文件的列信息,因为在调试时,列信息是没有用的
module:
	会定位到ts源码,而不是经过loader转译后的js源码
evel-source-map
	会将sourcemap以dataUrl形式打包到文件中,重编译速度非常快

生产环境配置 build/webpack.pro.config.js:

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
}

安装cleanwebpackplugin插件:

npm i clean-webpack-plugin

功能:每次成功构建后,清空dist目录

配置文件入口 build/webpack.config.js:

const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')

module.exports = (env, argv) => {
    let config = argv.mode === 'development' ? devConfig : proConfig;
    return merge(baseConfig, config);
};

安装webpack-merge插件

npm i webpack-merge -D

功能:将两个配置文件进行合并

逻辑:

webpack.config.js中引入前面的3个配置文件
通过判断当前环境变量,选择对应的配置文件,再将baseConfig和config合并

四,配置入口和启动命令

修改package.json入口为src/index.ts:

{
	...
	"main": "./src/index.ts",
	...
}

开发环境启动命令

npm start

package.json中script选项,添加start命令配置:

{
  ...
  "scripts": {
    "start":"webpack-dev-server --mode=development --config ./build/webpack.config.js"
  }
  ...
}

使用webpack-dev-server启动服务
--mode指定模式,设置当前环境变量为development
--config指定配置文件为buildwebpack.config.js

将src/index.ts中声明的字符串,挂载到tpl/index.html的class=app的div上

src/index.ts:

let hello : string = 'Hello TypeScript'
document.querySelectorAll('.app')[0].innerHTML = hello;

测试开发环境启动命令:

执行npm start

ts_start

生产环境启动命令

npm run build

package.json中script选项,添加build命令配置:

{
	...
	"scripts": {
	    "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
	    "build": "webpack --mode=production --config ./build/webpack.config.js",
	  },
	  ...
}

执行npm run build,根目录生成dist文件夹,包含打包后全部文件
构建好的app.js会自动嵌入到模板文件index.html中
build_result
package.json:

{
  "name": "ts-in-action",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.ts",
  "scripts": {
    "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
    "build": "webpack --mode=production --config ./build/webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^6.0.4",
    "typescript": "^3.6.2",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "clean-webpack-plugin": "^3.0.0"
  }
}

五,结尾

本篇搭建了一个ts的基础项目
后续的功能将以这个项目为基础进行演示

BraveWangDev

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录