typeScript的webpack配置

目录

• 先上最终代码
• 初始化
• 写一段ts代码
• webpack配置
  • 需要安装的依赖
  • 代码
  • tsconfig.json配置
    • 在tsx中使用js的模块引入方式
  • 使用第三方模块

先上最终代码

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/ //表示node_modules中的tsx文件不做处理
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "es6",
    "target": "es5",
    "allowJs": true,
    "allowSyntheticDefaultImports": true
  }
}

package.json

{
  "name": "ts_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "zhangmiao",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^8.0.2",
    "typescript": "^3.9.7",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "@types/lodash": "^4.14.159",
    "lodash": "^4.17.19"
  }
}

---

初始化

npm install -y
npm install webpack webpack-cli --save-dev

写一段ts代码

class Greeter{
  greeting:string;
  constructor(message:string){
    this.greeting=message;
  }
  greet(){
    return "Hello,"+this.greeting;
  }
}

let greeter=new Greeter('world');

let button=document.createElement('button');

button.textContent="say hello";
button.onclick=function(){
  alert(greeter.greet());
}

document.body.appendChild(button);

这段代码就是一个点击say hello按钮，然后弹出hello world的小demo。
当然这段代码放在浏览器上肯定是无法直接执行的，所以我们需要将他进行打包。接下来就是配置webpack，使这段代码可以运行起来。

webpack配置

需要安装的依赖

• ts-loader
• typescript

npm install ts-loader typescript --save-dev

代码

在package.json中配置打包命令

  "scripts": {
    "build":"webpack"
  },

在webpack中配置：

const path=require('path');

module.exports={
  mode:'production',
  entry:'./src/index.tsx',
  module:{
    rules:[
      {
        test:/.tsx?$/,
        use:'ts-loader',
        exclude:/node_modules/ //表示node_modules中的tsx文件不做处理
      }
    ]
  },
  output:{
    filename:'bundle.js',
    path:path.resolve(__dirname,'dist')
  }
}

其实要使用一种语法，不论是css,ts,less都是一样的套路，引入对应的文件，在module里面配置对应的loader，一般就可以正常的打包了。
我们先来打包试一下npm run build

结果出现报错：

Module build failed (from ./node_modules/_ts-loader@8.0.2@ts-loader/index.js):
Error: error while parsing tsconfig.json

这段代码的解决办法是在文件的根目录下创建一个tsconfig.json的文件。

tsconfig.json配置

{
  "compilerOptions":{
    "outDir": "./dist",
    "module": "es6",
    "target": "es5",
    "allowJs": true,
    "allowSyntheticDefaultImports": true
  }
}

这里配置了一些常用的配置项

• outDir：当使用loader打包tsx文件时，打包文件会放在这个配置项配置的目录下。
• module：指的是我们使用的是ES module的方式引入
• target：这个指的是我们最终打包的时候，需要把typescript转化为什么样的形式。写es5可以打包成es5的语法,在大部分浏览器上都可以运行。
• allowJs：表示可以在ts的语法中引入js这样的模块或文件。

在tsx中使用js的模块引入方式

在tsx中，我们这样引入react：

import * as React from 'react'

在js中我们这样引入

import React,{Component, useState} from 'react'

allowSyntheticDefaultImports:true是为了使我们可以在tsx中像在js中一样引入模块。当然，也可以不配置这一项，继续使用tsx的引入方式即可。

我们再进行打包，npm run build。打包成功。

我们进入dist目录下的bundle.js文件，复制里面的js，到浏览器的控制台中运行，可以检测一下是否出错。

使用第三方模块

比如我们现在使用lodash，npm install lodash --save。

import _ from 'lodash'

class Greeter{
  greeting:string;
  constructor(message:string){
    this.greeting=message;
  }
  greet(){
    return _.join(["Hello,",this.greeting],'');
    // return "Hello,"+this.greeting;
  }
}

let greeter=new Greeter('world');

let button=document.createElement('button');

button.textContent="say hello";
button.onclick=function(){
  alert(greeter.greet());
}

document.body.appendChild(button);

return _.join(["Hello,",this.greeting],'');这样写是没有什么问题的，就做了一个字符串拼接。但是当我们在_.join中什么不写或者使用一些有问题的写法的时候:return _.join();。这时你会发现它没有报错也没有提示。这和ts优秀的静态检查是相违背的，我们希望它能将第三方模块的语法也能一并检查了。方法是引入第三方模块的类型说明文件，比如：

npm install @types/lodash --save--dev

我们可以在https://microsoft.github.io/TypeSearch/中搜索这个第三方模块是否有类型说明文件。

---

结束