Оригинальный адрес:marxcall.com/2018/04/10/…
Я изучаю Node.js, вот введен, чтобы использовать WebPack для создания среды разработки узла на основе наведенных на фигуре.
Обязательные функции для всей среды
Хорошая среда разработки позволяет разработчикам сосредоточиться на коде и не беспокоиться о других вещах. Вот некоторые необходимые условия, перечисленные первыми.
- Одна команда может запустить проект.
- Одна команда может упаковать проект.
- Изменения кода во время разработки могут быть автоматически обновлены, предпочтительно горячее обновление, а не перезапуск службы, чтобы подготовиться к последующей отладке кода внешнего интерфейса.
- В разработке можно использовать отладку редактора или хрома, я привык использовать vscode.
Основные идеи строительства
Используйте ts глобально, включая скрипты, файлы конфигурации webpack. Используйте npm для вызова сценария ts, сценарий выполняется с использованием ts-node, а сценарий ts используется для вызова API веб-пакета для упаковки скомпилированных файлов.
npm scipts -> start-dev.ts -> webpack(webpackConfig)
Вот объяснение того, почему скрипты ts используются для вызова webpack вместо написания команд webpack непосредственно в скриптах npm. Мое мнениеAll In Typescrpt, старайтесь не использовать js, если вы можете использовать ts, и используйте API узла webpack, чтобы легко писать конфигурацию webpack с помощью ts. Еще одним преимуществом этого является то, что конфигурация веб-пакета может быть записана динамически, а необходимая конфигурация может быть сгенерирована в соответствии с входящими параметрами.
Выбор
Здесь выбор проекта был очень четким.
-
TypescriptОсновной язык, используемый в проекте, с добавлением строгой поддержки типов для фронтенд-разработки позволяет избежать многих проблем в процессе написания кода. -
KoaОн широко используется. Никаких дополнительных функций не добавляется, а промежуточное ПО работает по принципу plug-and-play. -
WebpackИнструменты упаковки, горячая загрузка во время разработки. -
ts-nodeИспользуется для прямого выполнения ts-скриптов. -
start-server-webpack-pluginОчень важный плагин веб-пакета, который может запускать службу сразу после компиляции и поддерживает горячую загрузку в сигнальном режиме.webpack/hot/signalочень полезно.
Строительство окружающей среды
Сначала мы используем Koa для написания простого веб-сервера, а затем создаем среду для этого сервера.
код проекта
новыйserver/app.ts, этот файл в основном используется для создания приложения koa.
import * as Koa from 'koa';
const app = new Koa();
app.use(ctx => {
ctx.body = 'Hello World';
});
export default app;
Нам нужен еще один файл для запуска сервера и прослушивания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);
});
}
Конфигурация сборки
Прежде чем писать конфигурацию веб-пакета, давайте запишем конфигурацию ts и конфигурацию babel.
конфигурация машинописного текста
Здесь написана конфигурация, используемая 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"
]
}
вавилонская конфигурация
.babelrc,"modules": falseОчень важный,tree shaking,HMRполагаться на это.
{
"presets": [["env", {"modules": false}]]
}
конфигурация веб-пакета
Как правило, необходимо подготовить два набора конфигураций веб-пакетов: один для разработки и один для публикации. Как упоминалось ранее, использование API веб-пакета для упаковки дает возможность динамически создавать конфигурации веб-пакета. Итак, здесь мы пишемWebpackConfigкласс, который генерирует конфигурацию различных окружений по параметрам при создании экземпляра.
Разница между средой разработки и средой выпуска
Во-первых, режимы двух сред различны, а среда разработкиdevelopment, среда выпускаproduction. Дополнительную информацию о режиме см.документация веб-пакета.
Среда разработки должна выполнить горячую загрузку и запуск службы. Вам необходимо настроить «webpack/hot/signal» в записи, используйтеwebpack-node-externalsУпакуйте 'webpack/hot/signal' в код, добавьте HotModuleReplacementPlugin, используйтеstart-server-webpack-pluginЗапустите службу и включите горячую перезагрузку.
содержимое конфигурации веб-пакета
Теперь давайте запишем конфигурацию вебпака. Акцент написан в комментариях.
создать новый файл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 -> веб-пакет на стороне сервера -> код сервера -> промежуточное ПО веб-пакета -> внешний код
Это гарантирует, что для начала разработки требуется только одна запись, а передняя и задняя части могут быть загружены в горячем режиме.
2. Ключевые моменты для достижения горячей загрузки
- конфигурация веб-пакета
mode: 'development',дляNamedModulesPluginплагин - запись конфигурации веб-пакета: «webpack/hot/signal»
- Упаковать 'webpack/hot/signal' в код: nodeExternals({whitelist: ['webpack/hot/signal']})
- использовать
HotModuleReplacementPlugin - конфигурация start-server-webpack-plugin
signal: true - вавилонская конфигурация
"modules": false - Конфигурация tsconfig.json
"module": "es2015" - Используйте отдельный файл для запуска сервера, слушайте горячие загружаемые файлы,
server/server.ts
3. tsconfig
tsconfig ts-node для запуска скриптов отличается от tsconfig ts-loader для кода пакета.
Конфигурация, используемая ts-node, напрямую компилирует код с помощью tsc и запускает его на узле.В версиях ниже узла 8.x нельзя использовать импорт, поэтому следует использовать модульcommonjs.
Код, упакованный webpack, должен быть загружен в горячем режиме и должен использовать модуль es, здесь мы используемes2015.