Как скомпилировать node js в exe

Руководство. Node.js для начинающих

Если вы новичок в использовании Node.js, это руководство поможет вам начать с некоторых основ.

• Использование Node.js в Visual Studio Code
• Создание первого веб-приложения Node.js с помощью Express
• Попробуйте использовать модуль Node.js

Необходимые компоненты

• Установка Node.js в Windows или в подсистеме Windows для Linux.

Если вы впервые пробуете Node.js, рекомендуем выполнить установку непосредственно в Windows. Дополнительные сведения см. в статье Выбор между установкой Node.js в Windows и подсистеме Windows для Linux.

Использование Node.js в Visual Studio Code

Если вы еще не установили Visual Studio Code, вернитесь к предыдущему разделу предварительных требований и выполните действия по установке, связанные с Windows или WSL.

1. Откройте командную строку и создайте новый каталог с помощью команды mkdir HelloNode , а затем введите каталог: cd HelloNode .
2. Создайте файл JavaScript с именем «app.js» и переменной с именем «msg» в: echo var msg > app.js
3. Откройте каталог и файл app.js в VS Code с помощью команды code . .
4. Добавьте простую строковую переменную («Hello World»), а затем отправьте содержимое строки в консоль, введя его в файле «app.js»:

var msg = 'Hello World'; console.log(msg); 

Обратите внимание, что при вводе console в файл «app.js», VS Code отображает поддерживаемые параметры, связанные с объектом console , который можно выбрать из использования IntelliSense. Попробуйте поэкспериментировать с Intellisense, используя другие объекты JavaScript.

Создание первого веб-приложения Node.js с помощью Express

Express — это минимальная, гибкая и оптимизированная платформа Node.js, которая упрощает разработку веб-приложения, которое может обслуживать несколько типов запросов, таких как GET, PUT, POST и DELETE. Express поставляется с генератором приложений, который автоматически создает архитектуру файлов для приложения.

Чтобы создать проект с помощью Express.js, выполните следующие действия.

1. Откройте командную строку (командная строка, Powershell или любой другой вариант).
2. Создайте новую папку проекта: mkdir ExpressProjects и введите этот каталог: cd ExpressProjects
3. Используйте Express для создания шаблона проекта HelloWorld: npx express-generator HelloWorld —view=pug

Примечание. Мы используем команду npx , чтобы выполнить пакет Node Express.js без фактической установки (или временно установить его в зависимости от того, как вы хотите его представить). Если вы попытаетесь использовать команду express или проверить установленную версию Express с помощью: express —version , вы получите ответ, о том, что Express не удается найти. Если вы хотите глобально установить Express, чтобы применять его на постоянной основе, используйте: npm install -g express-generator . Список пакетов, установленных npm, можно просмотреть с помощью npm list . Они будут перечислены по глубине (количество вложенных каталогов в глубину). Установленные пакеты будут иметь глубину 0. Зависимости пакета будут иметь глубину 1, дополнительные зависимости на уровне глубины — 2 и т. д. Дополнительные сведения см. в статье Различие между npx and npm на сайте StackOverflow.

• bin . Содержит исполняемый файл, который запускает приложение. Он запускает сервер (через порт 3000, если не указана альтернатива) и настраивает базовую обработку ошибок.
• public . Содержит все общедоступные файлы, включая файлы JavaScript, таблицы стилей CSS, файлы шрифтов, изображения и другие ресурсы, необходимые пользователям при подключении к веб-сайту.
• routes . Содержит все обработчики маршрутов для приложения. В этой папке автоматически создаются два файла, index.js и users.js , которые служат примерами разделения конфигурации маршрута приложения.
• views . Содержит файлы, используемые модулем шаблонов. Express настроен на поиск подходящего представления при вызове метода преобразования. Обработчик шаблонов по умолчанию — Jade, но Jade является устаревшим в сравнении с Pug, поэтому для изменения подсистемы просмотра (шаблона) мы использовали флаг —view . Параметры флага —view и другие можно увидеть, используя express —help .
• app.js . Начальная точка приложения. Она загружает все и начинает обслуживать запросы пользователей. По сути, это связующий элемент, который содержит все части вместе.
• package.json . Содержит описание проекта, диспетчер скриптов и манифест приложения. Его основное назначение заключается в отслеживании зависимостей приложения и их соответствующих версий.

npm install 

npx cross-env DEBUG=HelloWorld:* npm start 

Совет Часть DEBUG=myapp:* приведенной выше команды означает, что вы указываете Node.js включить ведение журнала в целях отладки. Не забудьте заменить «myapp» именем своего приложения. Имя приложения можно найти в файле package.json в свойстве «name». Использование npx cross-env устанавливает переменную среды DEBUG в любом терминале, но ее также можно задать с помощью конкретного терминала. Команда npm start сообщает npm о необходимости запуска скриптов в файле package.json .

Теперь вы можете просмотреть работающее приложение, открыв веб-браузер и перейдя по адресу: localhost:3000

Теперь, когда приложение HelloWorld Express выполняется локально в браузере, попробуйте внести изменения, открыв папку «views» в каталоге проекта и выбрав файл «index.pug». После открытия измените h1= title на h1= «Hello World!» и выберите Сохранить (Ctrl+S). Просмотрите изменения, обновив URL-адрес localhost:3000 в веб-браузере.

Чтобы остановить запуск приложения Express, в терминале введите: CTRL+C

Использование модуля Node.js

В Node.js есть инструменты для разработки серверных веб-приложений, некоторые из них встроены и многие другие доступны через npm. Эти модули могут помочь во множестве задач:

Средство	Используется для
gm, sharp	Обработка изображений, включая редактирование, изменение размера, сжатие и т. д., непосредственно в коде JavaScript
PDFKit	Поколение PDF
validator.js	Проверка строки
imagemin, UglifyJS2	Минификация
spritesmith	Создание листа спрайтов
winston	Ведение журналов
commander.js	Создание приложения командной строки

Давайте воспользуемся встроенным модулем ОС для получения сведений об операционной системе компьютера:

1. В командной строке откройте интерфейс командной строки Node.js. После входа вы увидите подсказку > , сообщающую вам, что вы используете Node.js: node
2. Чтобы определить операционную систему, используемую в данный момент (которая должна возвращать ответ, сообщающий о том, что вы работаете под Windows), введите: os.platform()
3. Чтобы проверить архитектуру ЦП, введите: os.arch()
4. Чтобы просмотреть доступные в системе процессоры, введите: os.cpus()
5. Оставьте интерфейс командной строки Node.js, введя .exit или дважды нажав CTRL+C.

Совет Модуль OS Node.js можно использовать для выполнения таких действий, как проверка платформы и возврата переменной для конкретной платформы: Win32/.bat для разработки Windows, дарвин/.sh для Mac/unix, Linux, SunOS и т. д. (например, var isWin = process.platform === «win32»; ).

Учебник. Создание приложения Node.js и React в Visual Studio

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

В Visual Studio можно легко создать проект Node.js, а также использовать IntelliSense и другие встроенные функции, поддерживающие Node.js. При работе с этим руководством вы создадите проект веб-приложения Node.js на основе шаблона Visual Studio. Затем вы создадите простое приложение с помощью React.

В этом руководстве описано следующее:

• Создание проекта Node.js
• Добавление пакетов npm
• Добавление кода React в приложение
• Транскомпиляция JSX
• Подключение отладчика

Начиная с Visual Studio 2022, можно также создать проект React с помощью рекомендуемого типа проекта на основе CLI. Некоторые сведения в этой статье относятся только к типу проектов Node.js (расширение файла NJSPROJ). Шаблон, используемый в этой статье, больше недоступен, начиная с Visual Studio 2022 версии 17.8 ( предварительная версия 2).

Прежде чем приступить к работе, изучите краткий список вопросов и ответов, который познакомит вас с некоторыми основными понятиями.

• Что такое Node.js? Node.js — это серверная среда выполнения JavaScript, выполняющая код JavaScript.
• Что такое npm? npm —это стандартный диспетчер пакетов Node.js. Диспетчер пакетов упрощает публикацию и совместное использование библиотек исходного кода Node.js. Диспетчер пакетов npm упрощает установку, обновление и удаление библиотек.
• Что такое React? React — это интерфейсная платформа для создания пользовательского интерфейса.
• Что такое JSX? JSX — это расширение синтаксиса JavaScript. Обычно оно используется с React для описания элементов пользовательского интерфейса. Прежде чем запускать код JSX в браузере, его нужно преобразовать в обычный код JavaScript.
• Что такое Webpack? Пакет webpack объединяет файлы JavaScript, чтобы они могли работать в браузере, а также может преобразовывать или упаковывать другие ресурсы. Webpack может указать компилятору, например Babel или TypeScript, преобразовать код JSX или TypeScript в обычный код JavaScript.

Необходимые компоненты

Для работы с этим руководством требуется следующее:

• Visual Studio с установленной рабочей нагрузкой «Разработка Node.js». Если вы еще не установили Visual Studio:
  1. Перейдите на страницу загрузки Visual Studio, чтобы установить Visual Studio бесплатно.
  2. В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Установить.

Если решение Visual Studio уже установлено, но требуется установить рабочую нагрузку Node.js, сделайте следующее:

1. В Visual Studio выберите Средства>Получить средства и компоненты.
2. В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Изменить, чтобы скачать и установить рабочую нагрузку.

1. После создания проекта щелкните правой кнопкой мыши узел проекта и выберите Панель свойств.
2. На панели Свойства задайте путь Node.exe для ссылки на глобальную или локальную установку Node.js. Вы можете указать путь к локальному интерпретатору в каждом из своих проектов Node.js.

Это руководство было протестировано с помощью Node.js 18.5.0.

Это руководство было протестировано с Node.js 12.6.2.

Создание проекта

Прежде всего, создайте проект веб-приложения Node.js.

1. Откройте Visual Studio и нажмите клавишу ESC, чтобы закрыть начальное окно.
2. Нажмите клавиши CTRL+Q, введите node.js в поле поиска, а затем выберите в раскрывающемся списке элемент Blank Node.js Web Application — JavaScript (Пустое веб-приложение Node.js — JavaScript). Хотя в этом руководстве используется компилятор TypeScript, выполнение приведенных в нем инструкций необходимо начинать с шаблона JavaScript. Если параметр Пустое веб-приложение Node.js не отображается, нужно установить рабочую нагрузку «Разработка Node.js». Соответствующие инструкции см. в разделе Предварительные требования.
3. В диалоговом окне Настроить новый проект выберите команду Создать. Visual Studio создаст новое решение и откроет проект в области справа. Файл проекта server.js откроется в области редактора слева.
4. Структуру проекта можно изучить в Обозревателе решений в области справа.
   • На верхнем уровне находится решение (1), имя которого по умолчанию совпадает с именем проекта. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов.
   • Ваш проект (2) с именем, которое вы указали в диалоговом окне Настроить новый проект, выделен полужирным шрифтом. В файловой системе этот проект представляет собой файл .njsproj в папке вашего проекта. Чтобы просмотреть и задать свойства проекта и переменные среды, нажмите клавиши ALT+ВВОД или щелкните проект правой кнопкой мыши и в контекстном меню выберите пункт Свойства. Вы можете использовать и другие средства разработки, так как файл проекта не вносит изменений в источник проекта Node.js.
   • В узле npm (3) представлены все установленные пакеты npm. Чтобы найти и установить пакеты npm, щелкните правой кнопкой мыши узел npm. Вы можете установить и обновить пакеты с помощью параметров в package.json, или щелкнув узел npm правой кнопкой мыши.
   • Npm использует файл package.json (4) для управления зависимостями и версиями для локально установленных пакетов. Дополнительные сведения см. в разделе Управление пакетами npm.
   • Файлы проекта (5) отображаются в узле проекта. Файл запуска проекта server.js выделяется полужирным шрифтом. Задать файл запуска можно, щелкнув правой кнопкой мыши файл в проекте и выбрав Задать как файл запуска Node.js.

1. Откройте Visual Studio.
2. Создание проекта Нажмите клавишу ESC, чтобы закрыть окно запуска. Нажмите CTRL+Q, чтобы открыть поле поиска, введите Node.js и выберите Пустое веб-приложение Node.js (JavaScript). (Хотя в этом учебнике используется компилятор TypeScript, в шагах указано, что нужно начинать с шаблона JavaScript.) В появившемся диалоговом окне выберите Создать. Если шаблон проекта Пустое веб-приложение Node.js отсутствует, необходимо добавить рабочую нагрузку Разработка Node.js. Подробные инструкции см. в разделе с предварительными требованиями. Visual Studio создаст решение и откроет проект. (1) Полужирным шрифтом выделен ваш проект, имя которого вы указали в окне Новый проект. В файловой системе этот проект представлен файлом NJSPROJ в папке проекта. Вы можете задать свойства и переменные среды, связанные с проектом, щелкнув его правой кнопкой мыши и выбрав пункт Свойства (или нажав сочетание клавиш ALT + ВВОД). Вы можете одновременно использовать и другие средства разработки, так как файл проекта не вносит изменения в источник проекта Node.js. (2) На верхнем уровне находится решение, имя которого по умолчанию совпадает с именем проекта. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов. (3) В узле npm представлены все установленные пакеты npm. Вы можете щелкнуть узел npm правой кнопкой мыши, чтобы найти и установить пакеты npm с помощью диалогового окна. Кроме того, установить и обновить пакеты можно с помощью параметров, доступных в файле package.json и контекстном меню узла npm. (4) package.json — это файл, который npm использует для управления зависимостями и версиями пакетов для локально установленных пакетов. Дополнительные сведения см. в разделе Управление пакетами npm. (5) Файлы проекта, такие как server.js, отображаются в узле проекта. server.js — это файл запуска проекта, поэтому он выделяется полужирным шрифтом. Задать файл запуска можно, щелкнув правой кнопкой мыши файл в проекте и выбрав Задать как файл запуска Node.js.

Добавление пакетов npm

Для правильной работы этого приложения требуются следующие модули npm:

• react
• react-dom
• express
• path
• ts-loader
• typescript
• webpack
• webpack-cli

1. В Обозревателе решений щелкните правой кнопкой мыши узел npm и выберите элемент Установка новых пакетов npm.
2. В диалоговом окне Установка новых пакетов npm выполните поиск пакета react и щелкните команду Установить пакет.

Вместо поочередного поиска и добавления остальных пакетов в пользовательском интерфейсе вы можете вставить в файл package.json требуемый код пакета.

Из Обозревателя решений откройте package.json в редакторе Visual Studio. Добавьте следующий раздел dependencies перед концом файла:

"dependencies": < "express": "^4.18.2", "path": "^0.12.7", "react": "^18.2.0", "react-dom": "^18.2.0", "ts-loader": "^9.4.2", "typescript": "^5.0.2", "webpack": "^5.76.3", "webpack-cli": "^5.0.1" >, 

Примечание. Кроме того, пакеты npm можно установить с помощью командной строки. В Обозревателе решений щелкните правой кнопкой мыши имя проекта и выберите пункт Открыть командную строку здесь. Используйте стандартные команды Node.js для установки пакетов.

Добавление файлов проекта

Теперь добавьте в проект четыре новых файла.

Для этого простого приложения новые файлы проекта добавляются в корень проекта. В большинстве приложений файлы добавляются во вложенные папки, после чего ссылки в виде относительных путей соответствующим образом изменяются.

1. В Обозревателе решений выберите имя проекта и нажмите клавиши CTRL+SHIFT+A или щелкните правой кнопкой мыши имя проекта и выберите элементы Добавить>Новый элемент. Если вы не видите все шаблоны элементов, выберите «Показать все шаблоны» и выберите шаблон элемента.
2. В диалоговом окне Добавление нового элемента выберите JSX-файл TypeScript, введите имя файла app.tsx и нажмите кнопку Добавить или ОК.
3. Повторите эти шаги, чтобы добавить файл JavaScript с именем webpack-config.js.
4. Повторите эти шаги, чтобы добавить HTML-файл с именем index.html.
5. Повторите эти шаги, чтобы добавить файл конфигурации TypeScript JSON с именем tsconfig.json.

Добавление кода приложения

1. В Обозревателе решений откройте файл server.js и замените его содержимое следующим кодом:

'use strict'; var path = require('path'); var express = require('express'); var app = express(); var staticPath = path.join(__dirname, '/'); app.use(express.static(staticPath)); // Allows you to set port in the project properties. app.set('port', process.env.PORT || 3000); var server = app.listen(app.get('port'), function() < console.log('listening'); >); 

declare var require: any var React = require('react'); var ReactDOM = require('react-dom'); export class Hello extends React.Component < render() < return ( 
Welcome to React!!
 ); > > ReactDOM.render(, document.getElementById('root')); 

Настройка параметров компилятора Webpack и TypeScript

Затем добавьте код конфигурации Webpack в webpack-config.js. Вы добавляете простую конфигурацию Webpack, указывающую входной файл, app.tsx и выходной файл, app-bundle.js, для объединение и транспилирование JSX в обычный JavaScript. Для транскомпиляции также настраиваются некоторые параметры компилятора TypeScript. Этот базовый код конфигурации — это введение в Webpack и компилятор TypeScript.

В Обозревателе решений откройте файл webpack-config.js и добавьте приведенный ниже код.

module.exports = < devtool: 'source-map', entry: "./app.tsx", mode: "development", output: < filename: "./app-bundle.js" >, resolve: < extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx'] >, module: < rules: [ < test: /\.tsx$/, exclude: /(node_modules|bower_components)/, use: < loader: 'ts-loader' >> ] > > 

< "compilerOptions": < "noImplicitAny": false, "module": "commonjs", "noEmitOnError": true, "removeComments": false, "sourceMap": true, "target": "es5", "jsx": "react" >, "exclude": [ "node_modules" ], "files": [ "app.tsx" ] > 

Транскомпиляция JSX

1. В Обозревателе решений щелкните правой кнопкой мыши имя проекта и выберите пункт Открыть командную строку здесь.
2. В командной строке введите следующую команду Webpack: node_modules\.bin\webpack —config webpack-config.js В окне командной строки будут выведены результаты. Если вместо приведенных выше выходных данных будут выведены ошибки, их необходимо будет устранить, чтобы приложение работало. Отличие версий пакетов npm от версий, указанных в этом руководстве, может привести к ошибкам. Чтобы устранить ошибки, попробуйте следующее:
   • Используйте точные версии, показанные на предыдущем шаге, если вы еще не сделали Или, если вы по-прежнему видите ошибки:
   • Установите последние версии пакетов npm, щелкнув правой кнопкой мыши узел npm в Обозреватель решений и выбрав установить пакеты npm.

Если одна или несколько версий пакетов устарели и приводят к ошибке, может потребоваться установить более последнюю версию для устранения ошибок. Дополнительные сведения об использовании package.json для контроля версий пакетов npm см. в разделе Конфигурация package.json.

Щелкните правой кнопкой мыши узел проекта в Обозревателе решений, а затем выберите элементы Добавить>Существующая папка.

Выберите папку dist, а затем щелкните команду Выбрать папку. Visual Studio добавит в проект папку dist, которая содержит файлы app-bundle.js и app-bundle.js.map.

Откройте файл app-bundle.js, чтобы просмотреть транскомпилированный код JavaScript.

Если будет предложено перезагрузить файлы, которые были изменены в других средствах, выберите вариант Да, для всех.

В любое время, когда вы вносите изменения в app.tsx, необходимо повторно запустить команду Webpack. Чтобы автоматизировать этот шаг, можно добавить скрипт сборки для транскомпиляции JSX.

Добавление скрипта сборки для транскомпиляции JSX

Для версий Visual Studio, начиная с Visual Studio 2019, требуется скрипт сборки. Вместо транскомпиляции JSX в командной строке (как показано в предыдущем разделе) можно транскомпилировать JSX при сборке из Visual Studio.

Откройте Package.json и добавьте следующий раздел после раздела dependencies :

"scripts":

Выполнить приложение

1. На панели инструментов Отладка выберите целевой объект отладки, например веб-сервер (Microsoft Edge) или веб-сервер (Google Chrome).

Если вы уверены, что нужный вам целевой объект отладки доступен на компьютере, но его нет в списке вариантов, выберите пункт Просмотр с помощью из раскрывающегося списка целей отладки. Выберите в списке целевой браузер, который хотите установить по умолчанию и щелкните элемент По умолчанию.

Чтобы запустить приложение, нажмите клавишу F5, выберите зеленую стрелку или выберите элементы Отладка>Начать отладку. Откроется окно консоли Node.js, в котором отображается порт прослушивания отладчика. Visual Studio запускает приложение с помощью файла запуска server.js.

Закройте браузер и окно консоли.

Установите точку останова и запустите приложение.

Точки останова — это самая основная и важная функция надежной отладки. Точка останова указывает, где решение Visual Studio должно приостановить выполняемый код. Так вы сможете проверить значения переменных или поведение памяти, а также узнать, выполняется ли определенная ветвь кода.

В файле server.js щелкните в поле слева от объявления staticPath , чтобы установить точку останова:

Установка и срабатывание точки останова в коде React на стороне клиента

В предыдущем разделе вы подключили отладчик к коду Node.js на стороне сервера. Чтобы использовать точки останова на стороне клиента React, необходимо присоединить отладчик к нужному процессу. Ниже описан один из способов настройки отладки в браузере и подключения к процессу.

Включение отладки в браузере

Можно использовать Microsoft Edge или Google Chrome. Закройте все окна целевого браузера. Для Microsoft Edge также отключите все экземпляры Chrome. Так как оба браузера используют одну базу кода Chromium, лучше всего завершить работу обоих браузеров.

Другие экземпляры браузера могут препятствовать его открытию при включенной отладке. Расширения браузера могут препятствовать режиму полной отладки. Для поиска и завершения работы всех работающих экземпляров Chrome может потребоваться диспетчер задач.

Запустите браузер с включенной отладкой.

1. В раскрывающемся списке на панели инструментов Отладка выберите элемент Просмотр с помощью.
2. На экране Просмотр с помощью выберите нужный браузер и нажмите Добавить.
3. В поле Аргументы введите —remote-debugging-port=9222.
4. Присвойте браузеру новое понятное имя, например Edge с отладкой или Chrome с отладкой, а затем нажмите кнопку ОК.
5. На экране Просмотр с помощью выберите элемент Просмотр.

• Кроме того, вы можете открыть интерфейс Выполнить, щелкнув левой кнопкой мыши кнопку Пуск в среде Windows, и ввести следующий текст: msedge —remote-debugging-port=9222 or chrome.exe —remote-debugging-port=9222

Откроется окно браузера с включенной отладкой. Так как приложение еще не запущено, страница браузера пуста.

Подключение отладчика к сценарию на стороне клиента

1. В редакторе Visual Studio задайте точку останова в исходном коде app-bundle.js или app.tsx.
2. Для app-bundle.js задайте точку останова в функции render() . Чтобы найти функцию render() в файле app-bundle.js, нажмите клавиши CTRL+F или выберите элементы Правка>Найти и заменить>Быстрый поиск и введите render в поле поиска.

Если вы задаете точку останова в app.tsx, обновите webpack-config.js, чтобы заменить приведенный ниже код. После этого сохраните изменения. Замените этот код:

output: < filename: "./app-bundle.js", >, 

Вставьте следующий код:

output: < filename: "./app-bundle.js", devtoolModuleFilenameTemplate: '[resource-path]' // removes the webpack:/// prefix >, 

Совет После первого подключения можно быстро подключаться к этому же процессу, выбрав элементы Отладка>Повторно подключиться к процессу или нажав клавиши SHIFT+ALT+P.

В диалоговом окне Присоединить к процессу получите отфильтрованный список экземпляров браузера для присоединения. Убедитесь в том, что в поле Подключить к отображается правильный отладчик для вашего целевого браузера — JavaScript (Chrome) или JavaScript (Microsoft Edge — Chromium) Введите chrome или edge в поле фильтра, чтобы отфильтровать результаты.

Выберите процесс браузера с соответствующим портом узла (localhost в этом примере). Номер порта 1337 или localhost также могут отображаться в поле Заголовок, чтобы вам было проще выбрать нужный процесс.

Выберите Вложить. В следующем примере показано окно Подключиться к процессу для обозревателя Microsoft Edge.

Совет Если отладчик не присоединяется и вы видите сообщение Unable to attach to the process. An operation is not legal in the current state (Не удалось подключиться к процессу. Операция недопустима в текущем состоянии) с помощью диспетчера задач закройте все экземпляры целевого браузера перед запуском браузера в режиме отладки. Возможно, в браузере выполняются расширения, которые препятствуют переходу в режим полной отладки.

• Если вам не удается попасть в точку останова в файле app.tsx, повторите процесс с операцией Подключиться к процессу, которая подключает отладчик, как описано в предыдущих шагах. Убедитесь, что ваша среда настроена правильно:
  • Закройте все экземпляры браузера, включая расширения Chrome, с помощью диспетчера задач. Обязательно запустите браузер в режиме отладки.
  • Убедитесь, что сопоставитель с исходным кодом содержит ссылку на ./app.tsx, а не webpack:///./app.tsx, что не позволяет отладчику Visual Studio найти app.tsx.

  Кроме того, можно использовать инструкцию debugger; в файле app.tsx или задать точки останова в средствах для разработчиков (Chrome) или в средствах F12 (Microsoft Edge).

  Как скомпилировать node js в exe

  Чтобы начать работать с TypeScript, установим необходимый инструментарий. Установить TypeScript можно двумя способами: через пакетный менеджер NPM или как плагин к Visual Studio

  Установка через NPM

  Для установки через NPM вначале естественно необходимо установить Node.js (если он ранее не был установлен). После установки Node.js необходимо запустить следующую команду в командной строке (Windows) или терминале (Linux):

  npm install -g typescript

  При установке на MacOS также требуется ввести команду sudo . При вводе данной команды терминал запросит логин и пароль пользователя для установки пакета:

  sudo npm install -g typescript

  Вполне возможно, что ранее уже был установлен TS. В этом случае его можно обновить до последней версии с помощью команды

  npm update -g typescript

  Для проверки версии необходимо ввести команду

  tsc -v

  Компиляция приложения

  Для начала создадим каталог приложения. В моем случае это будут папка по пути C:/typescript . В каталог добавим файл index.html . Откроем этот файл в любом текстовом редакторе и определим в нем следующий код:

  Это обычный файл html, в котором определен пустой заголовок — элемент — в него мы будем выводить некоторое содержимое. И также на веб-странице подключается файл app.js .

  Теперь в том же каталоге создадим файл app.ts . Причем именно app.ts , а не app.js, то есть файл кода typescrypt. Это также обычный текстовый файл, который имеет расширение .ts . И в app.ts определим следующее содержание:

  class User < name : string; constructor(_name:string)< this.name = _name; >> const tom : User = new User("Том"); const header = this.document.getElementById("header"); header.innerHTML = "Привет " + tom.name;

  Что здесь происходит? Сначала определяет класс User — шаблон данных, которые будут использоваться на веб-странице. Этот класс имеет поле name , которое представляет тип string , то есть строку. Для передачи данных этому полю определен специальный метод — constructor , который принимает через параметр _name некоторую строку и передает ее в поле name :

  class User < name : string; constructor(_name:string)< this.name = _name; >>

  Далее мы подробнее разберем создание и использование классов. Далее создаем константу tom , которая представляет этот класс:

  const tom : User = new User("Том");

  Иначе говоря, константа tom представляет некоторого пользователя, у которого имя «Том».

  Затем получаем элемент с id header на веб-странице в одноименную константу header :

  const header = this.document.getElementById("header");

  То есть этот элемент будет представлять определенный на веб-странице index.html заголовок .

  Далее с помощью свойства innerHTML меняем содержимое элемента:

  header.innerHTML = "Привет " + tom.name;

  В данном случае свойству innerHTML передается строку, к которой добавляется значение свойства tom.name . То есть мы ожидаем, что в заголовок на веб-странице будет выводится создаваемая здесь строка.

  Сохраним и скомпилируем этот файл. Для этого в командной строке/терминале с помощью команды cd перейдем к каталогу, где расположен файл app.ts (в моем случае это C:\typescript). И для компиляции выполним следующую команду:

  tsc app.ts

  

  После компиляции в каталоге проекта создается файл app.js , который будет выглядеть так:

  var User = /** @class */ (function () < function User(_name) < this.name = _name; >return User; >()); var tom = new User("Том"); var header = this.document.getElementById("header"); header.innerHTML = "Привет " + tom.name;

  

  И теперь мы можем кинуть веб-страницу index.html в браузер и увидеть результат работы написанного на TypeScript кода:

  Курсы javascript

  я знаю, что javascript создавался как интерпретируемый язык, но может есть возможность скомпилировать код яваскрипта в исполняемый exe-файл?

  15.04.2010, 00:36
  Регистрация: 04.04.2008
  Сообщений: 6,245
  15.04.2010, 00:53
  Новичок на форуме
  Регистрация: 15.04.2010
  Сообщений: 7

  просто интересно, в интернете на этот вопрос неоднозначное мнение, но если рассуждать логически, то получается вот такой ответ — синтаксис javascript похож на C++ и значит существует возможность компиляции на машинный язык.

  15.04.2010, 01:56
  Регистрация: 02.01.2010
  Сообщений: 6,458

  Вариантов дофига:
  1.Переименовать .html с js в .hta
  2.Запускать .js файлы как есть.(для вывода юзать доп синтаксис JScript)
  3.Всякое движки javascript, тот же ff на нём написан.
  4. .
  5. .
  6. profit!

  15.04.2010, 02:11
  Новичок на форуме
  Регистрация: 15.04.2010
  Сообщений: 7

  нужен вариант, в котором файл js.js компилировался бы в исполняемый файл js.exe, возможно ли такое?И это без всяких дополнений различными махинациями в исходном коде программы

  15.04.2010, 02:11
  Регистрация: 04.04.2008
  Сообщений: 6,245

  синтаксис это далеко не единственно И очень далеко не самая главная характеристика языка
  например PHP гораздо ближе к C++, нежели чем JS
  но при этом они(PHP и C++) все равно очень далеки от друг друга
  но, все три языка имеют схожий(не идентичный)синтаксис

  ну, вообще по сути любой интерпретируемый язык можно собрать в машинный код.
  собираем его интерпретатор в машинный код, а в качестве входных данных указываем интерпретируемый файл
  ВСЕ!

  Итак вернемся к вопросу:
  зачем вам понадобился именно исполняемый файл exe?
  just 4 fun?
  или с практической точки зрения

  15.04.2010, 02:22
  Новичок на форуме
  Регистрация: 15.04.2010
  Сообщений: 7

  пока чисто теоретический интерес. Очень часто я встречал сообщения в интернете, что это невозможно, но ведь любой язык можно перевести в другой. Данные сообщения равносильны тому, например, что английский нельзя перевести на русский, но это как то глупо звучало бы, да? И данные сообщения исходят от считающих себя продвинутыми программистов.

  15.04.2010, 03:09
  Регистрация: 04.04.2008
  Сообщений: 6,245

  да
  1)либо вручную на это понадобится куча денег
  2)автоматически
  не все языки одианаково хорошо переовдятся друг в друга автоматически
  полноценны перевдчик из одного языка в другой начинает свою стоимость от 1000$
  сделать просто так(без денег) такой переводчик мало кто возьмется и доведет до конца
  не уверен, что есть такой переводчик для JS->компилируемый язык
  скорее всего нету
  а значит пока что невохможно

  15.04.2010, 03:18
  Новичок на форуме
  Регистрация: 15.04.2010
  Сообщений: 7

  для меня это пока чисто теоретический вопрос, я люблю решать такие практически нерешаемые задачи, но сейчас на это у меня нет времени, так что пока интересуюсь поверхностно, но возможно в скором будущем я займусь этим вопросом.

  Похожие публикации:

  1. Как включить игровой режим в windows 10
  2. Как обновить данные в sql
  3. Как перейти на гугл вместо яндекса
  4. Как проанализировать данные в excel