TypeScript + Webpack 环境搭建

Posted 生活总得有些仪式感

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TypeScript + Webpack 环境搭建相关的知识,希望对你有一定的参考价值。

TypeScript + Webpack 环境搭建步骤

  1. 安装Node.js
  2. 安装npm
  3. 创建一个npm项目
  4. 安装typescript,配置ts
  5. 安装webpack,配置webpack

初始化一个npm项目

npm init

将在项目根目录下创建package.json文件。文件目录结构如下

ts3-demo
|- src
  |- index.ts
|- package.json

全局安装typescript命令:

npm install -g typescript

可以使用以下命令来查看你的机器中是否安装了Node.js npm  typescript,以及安装的版本。

node -v
npm -v
tsc -v

typescript compiler

typescript的编译器叫做 tsc。

假设有个src/index.ts 文件,将它编译成index.js,可以使用命令:

tsc src/index.ts --target es5 
或者
tsc src/index.ts --target es3

启动观察模式,当ts文件更改之后,自动进行编译。

tsc src/index.ts --watch --target es5
// index.ts
export default class Index {
    title = ‘Hello‘;
    name = ‘Lori‘;    
}

编译后结果

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Index = /** @class */ (function () {
    function Index() {
        this.title = ‘Hello‘;
        this.name = ‘Lori‘;
    }
    return Index;
}());
exports.default = Index;

通常不会在terminal中敲命令来编译,而是在项目的根路径下,建一个json配置文件 tsconfig.json,来配置这些编译选项。

初始化tsconfig.json的命令:

tsc --init

然后在terminal中使用tsc命令,会发现项目中所有ts文件都被编译成了js文件。

tsc

配置tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

安装Webpack

npm install webpack webpack-cli --save-dev

安装ts-loader

npm install ts-loader --save-dev

安装Webpack插件 html-webpack-plugin

用于自动生成index.html文件。

npm install html-webpack-plugin --save-dev

配置webpack.config.ts

const path = require(‘path‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
    mode: "development",
    devtool: "inline-source-map", 
    entry: "./src/index.ts",
    output: {
        path: __dirname + ‘/dist‘,
        filename: ‘[name].bundle.js‘
    },
    resolve: {
        extensions: [‘.ts‘, ‘.tsx‘, ‘.js‘]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: ‘index‘
        })
    ],
    module: {
        rules: [
            {
                test: /.tsx?$/,
                use: ‘ts-loader‘,
                exclude: /node_modules/
            }
        ]
    },

    devServer: {
        contentBase: path.join(__dirname, ‘dist‘), 
        compress: true, 
        historyApiFallback: true, 
        hot: true,
    }
}

想要在debug时生成相应的map文件,注意两点:

  1. tsconfig.json 中 sourceMap 设置为 true
  2. webpack.config.ts中 devtool: "inline-source-map"

配置package.json 添加命令

"scripts": {
    "start": "./node_modules/.bin/webpack-dev-server",
    "build": "./node_modules/.bin/webpack",
    "test": "echo "Error: no test specified" && exit 1"
  },

运行npm run build 进行编译。

文件目录结构如下

ts3-demo
|-dist
  |- index.html
  |- main.bundle.js
|- src
  |- index.ts
|- package.json
|- tsconfig.json
|- webpack.config.js

运行npm start 启动本地服务器。

以上是关于TypeScript + Webpack 环境搭建的主要内容,如果未能解决你的问题,请参考以下文章

搭建webpack脚手架来打包TypeScript代码

搭建webpack脚手架来打包TypeScript代码

TypeScript 环境搭建:

邂逅TypeScript

个人笔记2023年搭建基于webpack5与typescript的react项目

在基于 TypeScript/eslint/Webpack 的构建环境中检测未使用的导出符号