typescript+webpack+webpack-dev-server结合在网页中运行
今天我们要把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-dev2、创建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-dev2、在根目录下新建一个配置文件，比如叫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代码，页面上就会马上表现出效果了，不需要再去执行编译命令了。
这在我们开发阶段真是省时省力啊。