Babel-cli
В прошлых темах для компиляции 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"
},
- Глава 1. Введение в React
- Глава 2. Основы React
- Глава 3. Состояние. Управление компонентами-классами
- Глава 4. Хуки. Управление функциональными компонентами
- Глава 5. Маршрутизация
- Глава 6. Flux и Redux
- Глава 7. Дополнительные статьи