webpack实战——TS的打包配置(三)

项目初始

1.新建一项目type-script并初始化

npm init -y

2.新建webpack.config.js
3.新建目录src,在src目录下新建index.tsx
4.安装webpack 和webpack-cli

npm install webpack webpack-cli --save-dev

index.tsx

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

let greeter = new Greeter("world")
alert(greeter.greet())

ts打包配置

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/
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

安装:

npm i ts-loader typescript --save-dev

添加脚本:

{
	"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
}

注: 在根目录type-script下新建一tsconfig.json
tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist",//打包到dist目录下
        "module": "es6", //遵循ES module
        "target": "es5", //最终转换成es5
        "allowJs": true  //允许引入js代码
    }
}

运行npm run build,生成bundle.js打包文件,将打包文件中的代码复制到控制台回车,便能看到alert(‘hello world’)

这里使用ts使得代码更为严谨

看另外一个例子

在index.tsx里面引用lodash库
安装:

npm install lodash --save-dev

index.tsx

import * as _ from 'lodash'; 

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

        //第一个参数应该填数组,但是填null没有报错,没有体现ts的优势
        //安装@types/lodash ts就能正确识别lodash里的函数,调用不正确就报错
        // return _.join(null, '') //错误
    }
}

let greeter = new Greeter("world")
alert(greeter.greet())

安装@types/lodash

npm install @types/lodash --save-dev

安装模块的类型文件
像jquery
就安装: npm install @types/jquery --save-dev

总结: 如果引入外面的库,是不能使用到ts的一些自动检测的特性,需要安装这些库的类型文件,
再去使用这些库,就能给出对应的报错、警告