webpack学习第二十步—— 打包TypeScript

使用typescript

• 安装ts-loader 和 typescript

npm install ts-loader --save
npm install typescript --save

• 新建index.ts文件

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

let greeter = new Greeter("world")

alert(greeter.greet())

• webpack.config.js中对ts文件使用ts-loader

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src/index.tsx',
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname,'build')
    }
}

• 新建tsconfig.json文件

{
  "compilerOptions": {
    "outDir": "./build",
    "module": "es6",
    "target": "es5",
    "allowJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

• 打包生成bundle.js文件

使用三方库

• index.ts使用lodash

import * as _ from 'lodash'
class Greeter {
    greeting: string
    constructor(message: string) {
        this.greeting = message
    }
    greet() {
        return _.join(["Hello,",this.greeting],' ')
    }
}

let greeter = new Greeter("world")

alert(greeter.greet())

• 安装lodash 和@types/lodash