即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

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

编程语言 github_26672553 13℃ 0评论
本文目录
[隐藏]

今天我们要把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.jsindex.ts编译之后的文件。


这样的代码是肯定不能在网页里运行的。


比如我们有个index.html,代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<script src="./built/index.js">script>
body>
html>

那么怎么办?


借助一些构建工具,比如webpack

1、安装webpackts-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结合,然后使得程序可以在网页中运行就算完成了。

1.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代码,页面上就会马上表现出效果了,不需要再去执行编译命令了。


这在我们开发阶段真是省时省力啊。

转载请注明:CodingBlog » typescript+webpack+webpack-dev-server结合在网页里运行

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情