搭建 TypeScript 开发环境

HobbesGeorgia 发布于18天前
0 条问题

随着 TypeScript 使用的越来越广泛,是时候入门 TypeScript 。接下来,这篇文章学习 TypeScript 时,通过 Webpack 搭建的 TypeScript 开发环境,方便学习。本人也是刚开始入门,难免会出现错误,请不吝指正。

接下来进入 TypeScript 开发环境搭建吧!

TypeScript 安装

安装没有什么好说的,就是使用 npm 在终端执行:

npm i typescript -g // 全局安装

tsc -v // 验证是否成功

初始化项目目录

mkdir typescript_webpack // 创建文件夹
cd typescript_webpack // 进入文件夹
npm init -y // 生成 package.json 文件,-y:使用默认值快速创建。
tsc -init // 创建 tsconfig.json, 指定所在目录为根目录。

此时在项目目录中创建了一个 package.json 文件,后面会在这里面管理三方库。 tsconfig.json 文件中指定了用来编译这个项目的根文件和编译选项。后面具体说明配置项含义。

上面创建项目文件夹,初始化了 package.json 和 tsconfig.json 文件。下面完成项目目录的初始化,结构如下:

.
├── build
│   └── webpack.config.js // webpack 配置文件
├── package.json // npm 包管理
├── public 
│   └── index.html // html 模板文件
├── src
│   └── index.ts // 
└── tsconfig.json // typescript 配置文件

至此,项目目录结构初始化完成。

初始化 Webpack

安装 webpack 及其工具和插件。

npm i webpack webpack-cli webpack-dev-server -D
// webpack-cli 是脚手架
// webpack-dev-server 开发服务用于开启临时服务
// -D 表示在开发是使用

另外,还用到两个插件 html-webpack-plugin 和 clean-webpack-plugin ,前者是根据指定 html 打包,后者是在打发布包时清除就得包。

为了更接近真实项目,将 Webpack 配置分为三部分: base , dev 和 pro 。创建三个文件分别命名为: webpack.base.config.js , webpack.dev.config.js 和 webpack.pro.config.js 。将三个配置文件合并需要使用 webpack-merge 。

安装以上依赖:

npm i clean-webpack-plugin html-webpack-plugin webpack-merge -D

首先配置 webpack.base.config.js ,

// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.ts', // 入口文件
  output: {
    filename: 'app.js' // 打包文件名,默认在 `dist` 目录下
  },
  resolve: {
    extensions: ['.js', '.ts', '.tsx']
  },
  module: {
    rules: [
        // 配置 loader,后面讲解
    ]  
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html' // 模板 html
    })
  ]
}

这是基础的 webpack 配置, module 中配置不同的 loader 用于解析不同的文件。接下来配置开发环境的 webpack.dev.config.js 。

模板文件:

//...
<body>
  <div id="app"></div>
</body>
// ...

声明一个 div 作为根节点, id 设置为 app 。

module.exports = {
  // 忽略列信息-定位源码-dataurl打包到文件中重编译快
  devtool: 'cheap-module-eval-source-map'
  // 原始源代码(仅限行)。
}

开发环境这里配置的比较简单仅设置了 devtool ,该配置项用于规定是否以及如何生成 source-map 。具体请参考 Webpack 中文文档

生成环境 webpack.pro.config.js ,如下:

// 注意和 html-webpack-plugin 的区别。
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
  plugins: [
    new CleanWebpackPlugin()
  ]
}

将三个 config.js 合并到 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')
// 根据不同的 ENV 执行不同的 config.js
const config = process.NODE_ENV === 'development' ? devConfig : proConfig

module.exports = merge(baseConfig, config)

引入 TypeScript

在项目中安装 typescript 和 ts-loader 。仓库传送门 ts-loader

npm i typescript ts-loader -D

ts-loader 无论是在开发还是在生成环境都会使用到,所以配置在 webpack.base.config.js 中。

//...
module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader'
          }
        ],
        exclude: /node_modules/
      }
    ]
},
//...

基础配置已经完成了,不过还要配置下 package.json 才可以。

{
  "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"
  },
}

至此,在 Webpack 中搭建 TypeScript 开发环境完成。下面来测试一下吧!!!

测试

在 src/index.ts 中写入一下内容:

let helloTS = 'Hello world TS'

document.querySelectorAll('#app')[0].innerHTML = helloTS

终端执行 npm run start ,浏览器打开 http://localhost:8080/ 就可以看到上面的字符串了。

查看原文: 搭建 TypeScript 开发环境

  • yellowsnake
  • whitedog
  • whitedog
  • crazylion
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。