В прошлых темах для компиляции JSX в полноценный JavaScript в React.js на веб-страницу подключался компилятор Babel, который динамически при запуске веб-страницы выполнял компиляцию. Но существует и другой способ компиляции JSX в JavaScript - статическая компиляция, при которой мы явно создаем код на JavaScript.
Так, продолжим работу с проектом из прошлой темы (или создадим новый). В этом проекте у нас есть файл index.jsx, который содержит код на JSX:
const rootNode = document.getElementById("app"); // элемент для рендеринга приложения React // получаем корневой элемент const root = ReactDOM.createRoot(rootNode); // рендеринг в корневой элемент root.render( <h1>Hello React</h1>, // элемент, который мы хотим создать );
И также есть html-страница index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script src="index.js"></script> </body> </html>
Стоит отметить, что в данном случае уже не подключается компилятор Babel как отдельный файл, более того сам файл приложения называется index.js, а не index.jsx. Хотя у нас определен именно файл index.jsx.
Далее добавим в папку проекта новый файл, который назовем package.json и в котором определим следующий код:
{ "name": "helloapp", "version": "1.0.0", "devDependencies": { "@babel/cli": "^7.17.0", "@babel/core": "^7.17.0", "@babel/preset-react": "^7.16.0" }, "babel": { "presets": [ "@babel/preset-react" ] } }
В секции devDependencies определены зависимости для компилятора Babel. А секция "babel" определяет пресеты - наборы плагинов, которые используются для работы с React.
Далее установим эти пакеты. И для этого перейдем в командной строке/терминале к папке проекта и выполним следующую команду
npm install
Итак, у нас есть файл index.jsx с кодом JSX, теперь скомпилируем его в файл index.js. Для этого выполним следующую команду:
npx babel index.jsx --out-file index.js
Команда npx babel позволяет определить местоположение скриптов babel в рамках проекта (вместо этой команды также можно использовать относительный путь к babel - .\node_modules\.bin\babel).
В данном случае компилятору babel передается компилируемый файл - index.jsx
, а после параметра --out-file
указывается выходной файл. Более подробно про параметры компиляции
можно прочитать на официальной странице по babel-cli. И после выполнения команды в папке проекта окажется файл index.js, который мы можем использовать.
В качестве сервера опять же возьмем определенное в прошлой теме приложение node.js в файле app.js:
const http = require("http"); const fs = require("fs"); http.createServer(function(request, response){ let filePath = "index.html"; if(request.url !== "/"){ // получаем путь после слеша filePath = request.url.substring(1); } fs.readFile(filePath, function(error, data){ if(error){ response.statusCode = 404; response.end("Resourse not found!"); } else{ response.end(data); } }); }).listen(3000, function(){ console.log("Server started at 3000"); });
Теперь, как и в прошлой теме можно запустить проект на выполнение с помощью команды node app.js, и в браузере мы увидим ту же страницу:
Чтобы не запускать при запуске две команды (одна для компиляции файла javascript и другая для запуска сервера), определим скрипт в файле package.json, изменив код файла следующим образом:
{ "name": "helloapp", "version": "1.0.0", "scripts": { "start": "npx babel index.jsx --out-file index.js && node app.js" }, "devDependencies": { "@babel/cli": "^7.17.0", "@babel/core": "^7.17.0", "@babel/preset-react": "^7.16.0" }, "babel": { "presets": [ "@babel/preset-react" ] } }
Здесь в секции scripts
определена команда start
, которая позволяет последовательно запустить обе команды и сразу скомпилировать файл javascrript и
запустить сервер. Теперь нам достаточно выполнить в командной строке/консоли команду npm start:
Если мы хотим, чтобы при этом автоматически открывался браузер с запущенной страницей, то на Windows для этого можно добавить команду "start http://localhost:3000/":
"scripts": { "start": "npx babel index.jsx --out-file index.js && start http://localhost:3000/ && node app.js" },