Webpack入门八：使用TypeScript

TypeScript 是一种由微软开发的自由和开源的编程语言，代码在 GitHub 上托管。TypeScript 是 JavaScript 的一个超集，扩展了 JavaScript 的语法，所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作。TypeScript 为我们提供了可选的静态类型检查和ES6新特性。

TypeScript 是为大型应用程序开发而设计的，它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区中不可忽视的力量，不仅在 Microsoft 内部得到广泛运用，Angular, React, Vue这些开源框架都在广泛的使用。本篇主要聊一聊利用 Webpack 去处理 TypeScript 程序。

一、TypeScript Loader

在 Webpack入门一：模块化中我们知道 Webpack 是一个 module bundler, 在 Webpack入门四：loader使用中我们知道 Webpack 本身只能处理 JavaScript 模块，对于css格式的文件我们使用css-loader去读取它，那么对于 TypeScript 规范的语言标准是不是有 ts-loader 去处理呢？没错, TypeScript 的 loader有两种：

ts-loader
awesome-typescript-loader

Github上的 Awesome TypeScript loader for webpack 有关于 ts-loader和awesome-typescript-loader之间的区别精彩的解释.

二、配置环境及文件目录改造

接上一篇的代码，在这里使用 TypeScript 需要干四件事

安装一个Typescript加载器。
创建一个tsconfig.json文件来包含我们的TypeScript编译配置。
配置webpack.config.js
改造文件管理结构，这一步的改造是为了方便后面的管理

$ npm i typescript awesome-typescript-loader -D

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./app",
    "module": "commonjs",
    "noEmitOnError": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "ES5"
  }
}

关于这个配置文件可以阅读 TypeScript 官方的文档

配置 webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './main.ts',
  output: {
    path: __dirname + '/dist', // 将输出放到dist文件夹
    filename: 'app-[hash].js'
  },
  devServer: {
    contentBase: './dist',
    host: '127.0.0.1',
    port: 8080,
    inline: true,
    compress: false
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      { 
        test: /\.css$/, 
        use: ExtractTextPlugin.extract({
          use: ['css-loader'], // 转换 .css 文件需要使用的 Loader
        }),
      },
      {
        test: /\.ts$/,
        use: ['awesome-typescript-loader'],
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin('版权所有，翻版必究'),
    new HtmlWebpackPlugin({
            template: __dirname + "/index.html" //new 一个这个插件的实例，并传入相关的参数
        }),
    new ExtractTextPlugin({
      filename: `[name]_[contenthash:8].css` // 从 .js 文件中提取出来的 .css 文件的名称
    }),
  ],
}

下面来改造一下文件目录结构，新建app文件夹，将下列文件移入app文件夹

index.html
main.css
main.js 并将文件名改为main.ts
module.js 并将文件名改为module.ts

module.ts (原来的module.js使用的是CommonJS的模块化规范，这里我们改为ES6自己的模块规范语法)

function add(x: number, y: number) {
    return x + y;
}

function setName(name: string) {
    return name;
}

export {add, setName};

main.ts (同module.ts一样，原来的main.js使用的是CommonJS的模块化规范，这里我们改为ES6自己的模块规范语法)

import './main.css' // 载入 main.css
import * as mdl from './module'

document.write('这里是入口<br/><br/>');

var person = {
    age: mdl.add(10, 20),
    getName: mdl.setName('Felix Cao')
};
document.write(`姓名： ${person.getName}<br>`);
document.write(`年龄： ${person.age}`);

需要额外提一下的是，如果继续想使用CommonJS的require模块加载方法的话，需要额外安装第三方库node去识别require.

$ npm i @types/node

本实例源码

Reference

TypeScript 入门教程

felix-cao / Blog