Babeljs-working-babel-with-jsx
BabelJS-BabelとJSXの操作
この章では、JSXとbabelの操作について理解します。 詳細に入る前に、JSXとは何かを理解しましょう。
JSXとは何ですか？
JSXは、xml構文を組み合わせたJavaScriptコードです。 JSXタグには、XMLのように見えるタグ名、属性、および子があります。
Reactは、通常のJavaScriptではなくJSXをテンプレート化に使用します。 使用する必要はありませんが、それに付属するいくつかの長所を次に示します。
- コードをJavaScriptにコンパイルしながら最適化を実行するため、高速です。
- また、タイプセーフであり、コンパイル中にほとんどのエラーをキャッチできます。
- HTMLに精通していれば、テンプレートを簡単かつ迅速に作成できます。
プロジェクトのセットアップでbabel 6を使用しました。 babel 7に切り替える場合は、 @ babel/babel-package-name を使用してbabelの必要なパッケージをインストールします。
プロジェクトのセットアップを作成し、webpackを使用して、Babelを使用して通常のJavaScriptに反応するjsxをコンパイルします。
プロジェクトのセットアップを開始するには、以下のbabel、react、webpackのインストール用のコマンドを実行します。
コマンド
npm init次に、作業に必要なパッケージをインストールします-babel、webpack、jsx-
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev react
npm install --save-dev react-domここにインストール後のpackage.jsonがあります-
ここで、webpack.config.jsファイルを作成します。このファイルには、jsファイルをバンドルしてbabelを使用してes5にコンパイルするためのすべての詳細が含まれます。
サーバーを使用してwebpackを実行するには、webpack-serverと呼ばれるものがあります。 publishというコマンドを追加しました。このコマンドはwebpack-dev-serverを起動し、最終ファイルが保存されているパスを更新します。 現在、最終ファイルの更新に使用するパスは/devフォルダーです。
webpackを使用するには、次のコマンドを実行する必要があります-
npm run publish*webpack.config.js* ファイルを作成します。このファイルには、webpackが機能するための構成の詳細が含まれています。ファイル内の詳細は次のとおりです-
var path = require('path');
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, 'dev'),
filename: 'main_bundle.js'
},
mode:'development',
module: {
rules: [
{
test:/\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
}
]
}
};ファイルの構造は上記のとおりです。 現在のパスの詳細を示すパスで始まります。
var path = require('path');//gives the current path次はmodule.exportsオブジェクトで、プロパティのエントリ、出力、モジュールがあります。
エントリーは出発点です。 ここで、コンパイルするメインのjsファイルを指定する必要があります。
entry: {
app: './src/main.js'
},- path.resolve（_dirname、 ‘src/main.js’）-ディレクトリ内のsrcフォルダーと、そのフォルダー内の *main.js を探します。
出力
output: {
path: path.resolve(__dirname, 'dev'),
filename: 'main_bundle.js'
},出力は、パスとファイル名の詳細を含むオブジェクトです。 パスはコンパイルされたファイルが保持されるフォルダーを保持し、ファイル名は l ファイルで使用される最終的なファイルの名前を示します。
モジュール
module: {
rules: [
{
test:/\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
}
]
}- _Module_は、test、include、loader、queryなどのプロパティを持つルールの詳細を持つオブジェクトです。
- _Test_は、.jsおよび.jsxで終わるすべてのjsファイルの詳細を保持します。指定されたエントリポイントの末尾で.jsおよび.jsxを検索するパターンがあります。
- _Include_は、ファイルの検索に使用するフォルダーを指示します。
- _Loader_は、コードのコンパイルにbabel-loaderを使用します。
- _Query_には、プロパティプリセットがあります。これは、env – es5またはes6またはes7の値を持つ配列です。 es2015を使用し、プリセットとして反応しました。
フォルダー* src/.*を作成し、その中に main.js と App.jsx を追加します。
*App.jsx*import React from 'react';
class App extends React.Component {
render() {
var style = {
color: 'red',
fontSize: 50
};
return (
<div style={style}>
Hello World!!!
</div>
);
}
}
export default App;*main.js*import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(, document.getElementById('app'));次のコマンドを実行して.jsファイルをバンドルし、プリセット es2015 および react を使用して変換します。
コマンド
npm run pack*main_bundle.js* をdevフォルダーから *indexl* に追加します-<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "dev/main_bundle.js"></script>
</body>
</html>コマンド
npm run publish
