Перевод: сумасшедший технический ботаник оригинал:medium.com/@freeke_windows…
Когда я впервые открыл для себя TypeScript, я использовал его в своих программах на JavaScript. У использования TypeScript так много преимуществ, что теперь, когда вы хотите, чтобы я написал что-нибудь на простом JavaScript, вы должны дать мне вескую причину.
В этой статье я покажу вам, как настроить простую среду разработки для написания приложений Node.js с использованием TypeScript.
Прежде всего, может быть тысяча или более различных способов создания программ Node.js на TypeScript. Я просто хочу показать, как мне нравится.
Также вы можете найти мой стартовый проект здесь:GitHub.com/to код студенческой карты IC…. Там есть некоторые дополнительные функции, которые не будут обсуждаться в этой статье.
Package.json
Как я уже говорил, есть много способов сделать это. Мне нравится использовать Webpack для проектов TypeScript. Но первое, что нужно сделать, это создатьpackage.jsonНачинать.
ты можешь использовать этоnpm initгенерация командpackage.json, или вы можете скопировать и вставить приведенный ниже код и внести изменения.
// package.json
{
"name": "node-typescript",
"version": "0.0.1",
"author": "Freek Mencke",
"homepage": "https://medium.com/@freek_mencke",
"license": "MIT",
"scripts": {},
"dependencies": {},
"devDependencies": {}
}
Начнем с простой конфигурации Webpack для проекта JavaScript Node.js. После завершения базовой настройки будет добавлен TypeScript.
программа
Как упоминалось ранее, мы начнем с программы JavaScript, а затем преобразуем ее в TypeScript. Сначала создайтеmain.jsа такжеinformation-logger.jsдокументsrc/каталог, который содержит некоторые функции Node.js:
// src/information-logger.js
const os = require('os');
const { name, version} = require('../package.json');
module.exports = {
logApplicationInformation: () =>
console.log({
application: {
name,
version,
},
}),
logSystemInformation: () =>
console.log({
system: {
platform: process.platform,
cpus: os.cpus().length,
},
}),
};
// src/main.js
const informationLogger = require('./information-logger');
informationLogger.logApplicationInformation();
informationLogger.logSystemInformation();
Этот скрипт выводит некоторую системную информацию в консоль. бегатьnode main.js, вы можете увидеть следующий вывод:
{ application: { name: 'node-typescript', version: '0.0.1' } }
{ system: { platform: 'linux', cpus: 8 } }
Webpack
Первое, что вам нужно сделать перед использованием Webpack, это установить необходимые зависимости. не забудьте использовать-DФлаг, обозначающий devDependencies.
npm i -D webpack webpack-cli
Вы можете заметить, что он у меня не установленwebpack-dev-server. Это потому, что мы создаем приложение Node.js. я воспользуюсь позжеnodemon, который служит той же цели.
webpack.config.js
Следующим шагом является созданиеwebpack.config.jsфайл, который сообщает Webpack, что делать с нашим кодом.
// webpack.config.js
'use strict';
module.exports = (env = {}) => {
const config = {
entry: ['./src/main.js'],
mode: env.development ? 'development' : 'production',
target: 'node',
devtool: env.development ? 'cheap-eval-source-map' : false,
};
return config;
};
Как видите, запуск с Webpack не требует особых настроек. Требуются только два параметра:entryа такжеtarget. мы используемentryТочка входа для объявления поля, которое указывает Webpack использовать в Node.js.targetполе.
Можно использоватьmodeПоля сообщают Webpack, следует ли сосредоточиться на скорости компиляции (разработка) или на обфускации и минификации (производство). Чтобы помочь с отладкой, вам нужно запустить в режиме разработки сdevtoolполе, чтобы указать, что нам нужна исходная карта. Таким образом, если возникает ошибка, легко найти ее место в коде.
Чтобы использовать Webpack, вам нужно создать несколько команд npm:
// package.json
...
"scripts": {
"start": "webpack --progress --env.development",
"start:prod": "webpack --progress"
},
...
Теперь программу можно построить, выполнив эти команды. он создаст каталогdist/, который содержит выходной файлmain.js. Вы можете использовать webpack.config.js вoutput configurationУкажите другое имя.
Теперь наш проект должен выглядеть так:
dist/
main.js
node_modules/
src/
information_logger.js
main.js
package-lock.json
package.json
webpack.config.js
nodemon
Вы могли заметить, что после запуска команды запуска Webpack останавливается после сборки приложений. Он не отслеживает изменения, внесенные нами в файлы. Поскольку мы используем Node.js, я не могу использоватьwebpack-dev-server.
К счастью, можно использоватьnodemonДля решения этой проблемы. Это инструмент, разработанный специально для этой цели: перезапуск приложений Node.js во время разработки.
Начнем с установкиnodemon-webpack-plugin запускается. не забудь-Dфлаг, потому что это devDependency.
npm i -D nodemon-webpack-plugin
Давайте создадим новыйnodemonфлаг и добавить плагин вwebpack.config.jsсередина.
// webpack.config.js
'use strict';
const NodemonPlugin = require('nodemon-webpack-plugin');
module.exports = (env = {}) => {
const config = {
entry: ['./src/main.js'],
mode: env.development ? 'development' : 'production',
target: 'node',
devtool: env.development ? 'cheap-eval-source-map' : false,
resolve: { // tells Webpack what files to watch.
modules: ['node_modules', 'src', 'package.json'],
},
plugins: [] // required for config.plugins.push(...);
};
if (env.nodemon) {
config.watch = true;
config.plugins.push(new NodemonPlugin());
}
return config;
};
Webpack должен быть установлен, когда мы передаем флаг nodemonwatchнастроить и добавитьnodemonплагин. Когда мы изменим файл, Webpackwatchconfig перестроит программу.nodemonПлагин перезапустит программу после завершения перестроения.
Нам также нужно обновить команду npm. Я также создал некоторые безnodemonФлаги для команды сборки, .
// package.json
...
scripts: [
"start": "webpack --progress --env.development --env.nodemon",
"start:prod": "webpack --progress --env.nodemon",
"build": "webpack --progress --env.development",
"build:prod": "webpack --progress",
"build:ci": "webpack"
],
...
Мы завершили базовую настройку Webpack для нашей программы Node.js. Следующий шаг — добавить TypeScript!
TypeScript
Теперь давайте добавим TypeScript! Сначала установите необходимые зависимости.
Поскольку это проект Node.js, нам также необходимо установить соответствующую поддержку. Я работаю над LTS-версией Node.js, то есть версии 10. Это то, что я установил^ 10.0.0версия причина.
npm i -D typescript ts-loader @types/node@^10.0.0
ts-loader
мы будем использоватьts-loaderПлагин Webpack для компиляции TypeScript.
мы должныentryИзмените суффикс файла на.tsи скажите веб-пакету, что он также должен разрешить.tsфайл (по умолчанию Webpack работает только с.jsдокумент).
// webpack.config.js
...
const config = {
entry: ['./src/main.ts'],
mode: env.development ? 'development' : 'production',
target: 'node',
devtool: env.development ? 'cheap-eval-source-map' : false,
resolve: {
// Tells Webpack what files to watch
extensions: ['.ts', '.js'],
modules: ['node_modules', 'src', 'package.json'],
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
},
],
},
plugins: [], // Required for config.plugins.push(...);
};
...
tsconfig.json
Если мы попытаемся запустить нашу программу сейчас, она рухнет. Потому что файл tsconfig.json тоже отсутствует. Поэтому сначала создайте его.
// tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"lib": ["dom", "es2018"],
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"noUnusedLocals": true,
"removeComments": true,
"resolveJsonModule": true,
"strict": true,
"typeRoots": ["node_modules/@types"]
},
"exclude": ["node_modules"],
"include": ["src/**/*.ts"]
}
Как показано выше, я предпочитаю строгие файлы tsconfig, вам это не обязательно. Мне нравится устанавливать очень высокую версию синтаксиса объектного кода (esnextилиes2018), потому что Node.js очень хорошо поддерживает новые функции JavaScript.
программа
Нам все еще нужно изменить расширение файла JavaScript с.jsизменить на.ts. Давайте сделаем это и попробуем запустить проект.
Сразу после запуска проекта мы видим, что допустили «ошибку» в созданном нами тестовом приложении. Мы не можем внести изменения в package.jsonnameПоле деструктурировано, потому что оно могло быть определено или мы его переопределили. Поэтому необходимы некоторые изменения.
// information-logger.ts
import os from 'os';
import { name, version } from '../package.json';
export class InformationLogger {
static logApplicationInformation(): void {
console.log({
application: {
name,
version,
},
});
}
static logSystemInformation(): void {
console.log({
system: {
platform: process.platform,
cpus: os.cpus().length,
},
});
}
}
// main.ts
import { InformationLogger } from './information-logger';
InformationLogger.logApplicationInformation();
InformationLogger.logSystemInformation();
Если вы выполнили все предыдущие шаги, структура проекта теперь должна выглядеть так:
dist/
main.js
node_modules/
src/
information-logger.ts
main.ts
package-lock.json
package.json
tsconfig.json
webpack.config.js
Мы готовы писать программы Node.js на TypeScript!
Заключительные примечания
Я уверен, что существуют тысячи различных способов написания приложений Node.js на TypeScript. То, что я написал, — это не то, как вы должны это сделать, это просто один из способов, которым вы можете это сделать.
Остальными шагами могут быть добавление интеграции TSLint, добавление Dockerfile, настройка конвейера CI... все в ваших руках.