使用webpack搭建基于typescript的node开发环境

2018-04-22 admin

原文地址:marxjiao.com/2018/04/10/…

正在学习node.js,这里介绍使用webpack来搭建基于typescript的node开发环境。

整个环境的必备功能

一套好的开发环境能让开发者专注于代码,而不必关系其它事情。这里先列出一些必要的条件。

  1. 一个命令就能启动项目。
  2. 一个命令能打包项目。
  3. 开发时代码改动能够自动更新,最好是热更新,而不是重启服务,这里为后面和前端代码一起调试做准备。
  4. 开发中能使用编辑器或者chrome调试,我本人习惯使用vscode。

基本搭建思路

全局使用ts,包括脚本,webpack配置文件。使用npm调用ts脚本,脚本使用ts-node执行,使用ts脚本调用webpack的api来打包编译文件。

npm scipts -> start-dev.ts -> webpack(webpackConfig)

这里解释下为什么使用ts脚本来调用webpack而不是直接将webpack命令写在npm scripts里。我的想法是All In Typescrpt,尽量做到能用ts的就不用js,使用webpack的node api能轻松实现用ts写webpack配置。这样把做还有一个好处就是可以把webpack的配置写成动态的,根据传入参数来生成需要的配置。

选型

到这里项目的选型已经很明了了。

  • Typescript 项目使用的主语言,为前端开发添加强类型支持,能在编码过程中避免很多问题。
  • Koa 应用比较广泛。没有附加多余的功能,中间件即插即用。
  • Webpack 打包工具,开发中热加载。
  • ts-node 用来直接执行ts脚本。
  • start-server-webpack-plugin 很关键的webpack插件,能够在编译后直接启动服务,并且支持signal模式的热加载,配合webpack/hot/signal很好用。

环境搭建

我们先用Koa写一个简单的web server,之后针对这个server来搭建环境。

项目代码

新建server/app.ts,这个文件主要用来创建一个koa app。

import * as Koa from 'koa';

const app = new Koa();

app.use(ctx => {
    ctx.body = 'Hello World';
});

export default app;

我们需要另一个文件来启动server,并且监听server/app.ts的改变,来热加载项目。

新建server/server.ts

import * as http from 'http';
import app from './app';

// app.callback() 会返回一个能够通过http.createServer创建server的函数,类似express和connect。
let currentApp = app.callback();
// 创建server
const server = http.createServer(currentApp);
server.listen(3000);

// 热加载
if (module.hot) {
    // 监听./app.ts
    module.hot.accept('./app.ts', () => {
        // 如果有改动,就使用新的app来处理请求
        server.removeListener('request', currentApp);
        currentApp = app.callback();
        server.on('request', currentApp);
    });
}

编译配置

在写webpack配置之前,我们先写下ts配置和babel配置。

typescript配置

这里写的是webpack编译代码用的配置,后面还会介绍ts-node跑脚本时使用的配置。我们新建config/tsconfig.json

{
    "compilerOptions": {
        // module配置很重要,千万不能配置成commonjs,热加载会失效
        "module": "es2015",
        "noImplicitAny": true,
        "sourceMap": true,
        "moduleResolution": "node",
        "isolatedModules": true,
        "target": "es5",
        "strictNullChecks": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "inlineSources": false,
        "lib": ["es2015"]
    },
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

babel配置

.babelrc,"modules": false很重要,tree shakingHMR都靠它。

{
  "presets": [["env", {"modules": false}]]
}

webpack配置

一般情况下需要准备2套webpack配置,一套用来开发,一套用来发布。前面已经说过了使用webpack的api来打包为动态创建webpack配置提供了可能。所以这里我们写一个WebpackConfig类,创建实例时根据参数,生成不同环境的配置。

开发环境和发布环境的区别

首先两个环境的mode是是不同的,开发环境是development,发布环境是production。关于mode的更多信息可查看webpack文档

开发环境需要热加载和启动服务,entry里需要配置’webpack/hot/signal’,使用webpack-node-externals将’webpack/hot/signal’打包到代码里,添加HotModuleReplacementPlugin,使用start-server-webpack-plugin启动服务和开启热加载。

webpack配置内容

现在我们来写下webpack配置。重点写在注释中了。

新建文件config/Webpack.config.ts

import * as path from 'path';
import * as StartServerPlugin from "start-server-webpack-plugin";
import * as webpack from 'webpack';
import * as nodeExternals from 'webpack-node-externals';
import {Configuration, ExternalsElement} from 'webpack';

class WebpackConfig implements Configuration {
    // node环境
    target: Configuration['target'] = "node";
    // 默认为发布环境
    mode: Configuration['mode'] = 'production';
    // 入口文件
    entry = [path.resolve(__dirname, '../server/server.ts')];
    output = {
        path: path.resolve(__dirname, '../dist'),
        filename: "server.js"
    };
    // 这里为开发环境留空
    externals: ExternalsElement[] = [];
    // loader们
    module = {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    // tsc编译后,再用babel处理
                    {loader: 'babel-loader',},
                    {
                        loader: 'ts-loader',
                        options: {
                            // 加快编译速度
                            transpileOnly: true,
                            // 指定特定的ts编译配置,为了区分脚本的ts配置
                            configFile: path.resolve(__dirname, './tsconfig.json')
                        }
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.jsx?$/,
                use: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    };
    resolve = {
        extensions: [".ts", ".js", ".json"],
    };
    // 开发环境也使用NoEmitOnErrorsPlugin
    plugins = [new webpack.NoEmitOnErrorsPlugin()];
    constructor(mode: Configuration['mode']) {
        // 配置mode,production情况下用上边的默认配置就ok了。
        this.mode = mode;
        if (mode === 'development') {
            // 添加webpack/hot/signal,用来热更新
            this.entry.push('webpack/hot/signal');
            this.externals.push(
                // 添加webpack/hot/signal,用来热更新
                nodeExternals({
                    whitelist: ['webpack/hot/signal']
                })
            );
            const devPlugins = [
                // 用来热更新
                new webpack.HotModuleReplacementPlugin(),
                // 启动服务
                new StartServerPlugin({
                    // 启动的文件
                    name: 'server.js',
                    // 开启signal模式的热加载
                    signal: true,
                    // 为调试留接口
                    nodeArgs: ['--inspect']
                }),
            ]
            this.plugins.push(...devPlugins);
        }
    }
}

export default WebpackConfig;

编译脚本

使用ts-node来启动脚本时需要使用新tsconfig.json,这个编译目标是在node中运行。

在项目根目录新建tsconfig.json:

{
    "compilerOptions": {
        // 为了node环境能直接运行
        "module": "commonjs",
        "noImplicitAny": true,
        "sourceMap": true,
        "moduleResolution": "node",
        "isolatedModules": true,
        "target": "es5",
        "strictNullChecks": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "inlineSources": false,
        "lib": ["es2015"]
    },
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

开发脚本

启动开发脚本,scripts/start-dev.ts:

import * as webpack from 'webpack';

import WebpackConfig from '../config/Webpack.config';

// 创建编译时配置
const devConfig = new WebpackConfig('development');
// 通过watch来实时编译
webpack(devConfig).watch({
    aggregateTimeout: 300
}, (err: Error) => {
    console.log(err);
});

package.json中添加

"scripts": {
    "dev": "rm -rf ./dist && ts-node ./scripts/start-dev.ts"
},

执行yarn dev,我们能看到项目启动了: 命令行输出:

命令行输出

浏览器展示:

浏览器展示

修改server/app.ts


import * as Koa from 'koa';

const app = new Koa();

app.use(ctx => {
-   ctx.body = 'Hello World';
+   ctx.body = 'Hello Marx';
});

export default app;

能看到命令行输出:

更新代码后命令行输出

刷新浏览器:

浏览器展示

可以看到热更新已经生效了。

发布打包脚本

新建打包脚本scripts/build.ts

import * as webpack from 'webpack';

import WebpackConfig from '../config/Webpack.config';

const buildConfig = new WebpackConfig('production');

webpack(buildConfig).run((err: Error) => {
    console.log(err);
});

package.json添加build命令:

"scripts": {
+   "build": "rm -rf ./dist && ts-node ./scripts/build.ts",
    "dev": "rm -rf ./dist && ts-node ./scripts/start-dev.ts"
},

执行yarn build就能看到dist/server.js。这个就是我们项目的产出。其中包含了node_modules中的依赖,这样做是否合理,还在探索中,欢迎讨论。

到此整个环境搭建过程就完成了。

完整项目代码MarxJiao/webpack-node

总结

这个项目重点在于热加载和All In Typescript。

1. 为什么后端代码要热加载?

为了方便使用webpack中间件打包前端代码,这样不用重启后端服务就不用重新编译前端代码,重新编译是很耗时的。后续使用时,流程大概是这样的

start-dev.ts -> server端的webpack -> server代码 -> webpack中间件 -> 前端代码

这样能保证开发时只需要一个入口来启动,前后端都能热加载。

2. 实现热加载的关键点

  • webpack配置mode: 'development',为了NamedModulesPlugin插件
  • webpack配置entry: ‘webpack/hot/signal’
  • 将’webpack/hot/signal’打包进代码:nodeExternals({whitelist: [‘webpack/hot/signal’]})
  • 使用HotModuleReplacementPlugin
  • start-server-webpack-plugin配置signal: true
  • babel配置"modules": false
  • tsconfig.json配置"module": "es2015"
  • 使用单独的文件来启动server,监听热加载的文件,server/server.ts

3. tsconfig

ts-node运行脚本的tsconfig和ts-loader打包代码时的tsconfig不同。

ts-node用的config直接将代码用tsc编译后在node运行,在node 8.x以下的版本中不能使用import,所以module要用commonjs

webpack打包的代码要热加载,需要用es module,这里我们使用es2015

参考资料

原文链接:https://www.jianshu.com/p/6aab86403dc1

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-30001.html

文章标题:使用webpack搭建基于typescript的node开发环境

相关文章
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
回到顶部