typescript+webpack+webpack-dev-server结合在网页中运行

来源：互联网发布：js 集合编辑：程序博客网时间：2024/06/05 14:24

今天我们要把typescript结合前端构建工具(webpack)来运行。

前面我们的案列(User类)，我们已经在终端下运行过(node.js环境下)，没有问题。

"use strict";Object.defineProperty(exports, "__esModule", { value: true });// 引入var User_1 = require("./User");var UserService_1 = require("./UserService");// 实例化类var myUser = new User_1.User({    userName: "jack",    userAge: 22});var myService = new UserService_1.UserService(myUser);console.log(myService.add());

index.js的代码。index.js是index.ts编译之后的文件。
这样的代码是肯定不能在网页里运行的。
比如我们有个index.html，代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><!-- 引入编译之后的js文件 --><script src="./built/index.js"></script></body></html>

那么怎么办？
借助一些构建工具，比如webpack。

1、安装webpack和ts-loader

#进入项目根目录 执行npm install webpack ts-loader --save-dev

2、创建webpack配置文件webpack.config.js

https://webpack.github.io/docs/configuration.html
https://tslang.cn/docs/handbook/integrating-with-build-tools.html

module.exports = {    entry: {        "index":"./src/index.ts" // 入口文件可以多个    },    output: {        filename: "[name].js",  // 这里会自动生成index.js        path:__dirname+"/built" // 输出到哪个文件夹    },    resolve: {         extensions: [".ts",".js"]     // 自动补全，很重要    },    module: {        loaders: [            { test: /\.ts$/, loader: "ts-loader" }   // 使用了ts-loader        ]    }};

3、修改node配置文件package.json

给scripts锻加一项

    "wp":"webpack"

执行npm run wp命令就会默认去找webpack配置文件。

4、我们执行一次webpack

npm run wp

这个时候生成的新的/built/index.js就可以在浏览器使用了。

ok。其实到这里typescript+webpack结合，然后使得程序可以在网页中运行就算完成了。

webpack-dev-server

因为每次修改都需要重新『编译』，如果项目很大，编译就比较慢了。
所以webpack-dev-server就可以发挥作用了。
使用webpack-dev-server，我们一遍修改代码，webpack一边默默的『编译』。

1、安装

#根目录下 执行npm install webpack-dev-server --save-dev

2、在根目录下新建一个配置文件，比如叫webpack.config.dev.js

module.exports = {    entry: {        "index":"./src/index.ts" // 入口文件可以多个    },    output: {        filename: "[name].js",  // 这里会自动生成index.js        publicPath: "/" // 我们这就生成到根目录    },    resolve: {        extensions: [".ts",".js"]    // 自动补全，很重要    },    module: {        loaders: [            { test: /\.ts$/, loader: "ts-loader" }   // 使用了ts-loader        ]    }};

3、其他配置
在项目配置文件package.json文件的scripts段，添加一项：

   "wp-dev": "webpack-dev-server --config webpack.config.dev.js --inline --hot --content-base ./webapp"

可以看出wp-dev命令，使用的是webpack.config.dev.js这个配置文件，内容基于webapp这个文件夹。
所以我们还需要在目录文件一个webapp目录，里面新建一个index.html：

<script src="index.js"></script>

我们在webpack.config.dev.js这个配置文件中，webpack热编译的index.js是在根目录(实质在内存)。

4、开启webpack热编译

npm run wp-dev

如果没有报错，就是成功。

根据提示我们应该访问：http://localhost:8080/index.html

之后，我们修改.ts代码，页面上就会马上表现出效果了，不需要再去执行编译命令了。
这在我们开发阶段真是省时省力啊。

阅读全文

0 0