Babel-cli

Последнее обновление: 01.04.2022

В прошлых темах для компиляции 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
Установка babel-cli в проект React

Итак, у нас есть файл index.jsx с кодом JSX, теперь скомпилируем его в файл index.js. Для этого выполним следующую команду:

npx babel index.jsx --out-file index.js
компиляции JSX в babel-cli

Команда npx babel позволяет определить местоположение скриптов babel в рамках проекта (вместо этой команды также можно использовать относительный путь к babel - .\node_modules\.bin\babel).

В данном случае компилятору babel передается компилируемый файл - index.jsx, а после параметра --out-file указывается выходной файл. Более подробно про параметры компиляции можно прочитать на официальной странице по babel-cli. И после выполнения команды в папке проекта окажется файл index.js, который мы можем использовать.

компиляции JSX React в JavaScript в babel-cli

В качестве сервера опять же возьмем определенное в прошлой теме приложение 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, и в браузере мы увидим ту же страницу:

Компиляция React 17 с помощью Babel Cli 7

Чтобы не запускать при запуске две команды (одна для компиляции файла 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:

Компиляция React с помощью Babel Cli 7 и запуск сервера Node.js

Если мы хотим, чтобы при этом автоматически открывался браузер с запущенной страницей, то на Windows для этого можно добавить команду "start http://localhost:3000/":

"scripts": {
    "start": "npx babel index.jsx --out-file index.js && start http://localhost:3000/ && node app.js"
  },

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм