18

搭建 TypeScript 开发环境

 4 years ago
source link: https://www.tuicool.com/articles/qiINfiM
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

随着 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/ 就可以看到上面的字符串了。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK