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/ 中搜索这个第三方模块是否有类型说明文件。

结束

查看更多关于typeScript的webpack配置的详细内容...