開発環境の準備
まず、Node.jsをダウンロードしてインストールする必要があります。 インストール中（管理者権限が必要）、npmがインストールされ、システムパスが書き込まれていることを確認することが重要です。 Windowsの場合、「Node.jsコマンドプロンプト」が表示されますが、他のOSでは、そのようなものも表示されます。 起動します。 インターネットにアクセスせずに作業する場合（これは非常に不便ですが、起こります）、ローカルのnpmリポジトリを指すことができます。 企業のNexusである可能性があります。 これを行うには、コマンドプロンプトで次のコマンドを実行します
npm config set registry http://_npm_
次に、古典的なMavenアプリケーションを作成します。 この記事は主にJavaプログラマーを対象としているため、これを行う方法、およびSpring Bootアプリケーションを取得するためにpom.xmlで何を指定するかについては説明しません。 src \ main \ resources \ staticフォルダ（以降、単にstatic）を作成します。 その中のコンソールに移動し、 npm initコマンドを実行してノードアプリケーションを初期化します。 インタラクティブモードでは、アプリケーションのメインパラメータ（名前、作成者など）を入力するよう求められます。 終了すると、static \ package.jsonファイルが表示されます。いつでも手動で変更できます。 さらに手順を実行する前に、npmパッケージマネージャーを最新バージョンにアップグレードすることを強くお勧めします。 これを行うには、コンソールでコマンドを実行します
npm install npm@latest -g
必要な依存関係を接続します。 これらは、基本と開発の2つのカテゴリに分けられます。後者は、提供されたアセンブリに分類されません。 この例の最小セットは次のとおりです。
- 主なもの：
npm install react requirejs react-dom rest --save
- 開発：
npm install babel-loader babel-core webpack webpack-dev-server babel-preset-stage-0 babel-plugin-transform-regenerator babel-preset-es2015 babel-preset-react --save-dev
その結果、static \ package.jsonファイルが更新され、static \ node_modulesフォルダーが作成されます。 このフォルダーを.gitignoreに追加する必要があります。 また、Mavenリソースアセンブリから除外する必要があります。
<build> <resources> <resource> <directory>src/main/resources</directory> <excludes> <exclude>static/node_modules/**/*.*</exclude> </excludes> </resource> </resources> </build>
アプリケーションワイヤフレームを作成する
ReacJSでアプリケーションを作成する方法は、Facebookの本物のガイドに書かれています。 要するに、ReacJSプログラミングは、カスタムタグをhtmlコードにレンダリングするハンドラーを記述することになります。
最初に、静的\ appフォルダーを作成し、その中にapp.jsxファイルを作成します-アプリケーションのメインクラスがあります。 次のコンテンツを追加します。
import React from "react"; import ReactDom from "react-dom"; class App extends React.Component { render() { return <p>Hello, World!</p> } } ReactDom.render(<App />, document.getElementById('react'));
ここでは以下が重要です。小さなクラスでは、JSX構文が使用され、JavaScript言語のES2015構文が使用されます。 このスクリプトが追加されるHTMLページにid =“ react”の要素があり、<App />タグに置き換えられ、ひいては秘跡の碑文にレンダリングされると想定されています。 次に、次の内容のstatic \ index.jsファイルを作成します。
import App from './app/app.jsx';
これは、アプリケーションへのエントリポイントになります。 Ideaを使用し、その後JavaScriptの現在のバージョンがインポートをサポートしないことを誓う場合、Alt-Enterを押してES6をオンにします。
最後に、次の内容のsrc \ mail \ resources \ templates \ greeting.htmlファイルを作成します。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8" http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8"/> <title>Hello demo</title> </head> <body> <div id="react"/> <script src="/generated/app-bundle.js"/> </body> </html>
実際、これはプログラミングに関するものです。 Spring MVCを使用する場合、このhtmlを表示するアプリケーションを作成することは難しくありません。 JSXスクリプトを有効なJavaScriptに変換するだけで、すべてが成功します。 このために、Webpackを使用します。
Webpackを使用したコンパイルのセットアップ
ReactJSでWebpackを使用するのは一般的な方法です。 大まかに言えば、プロセスは、さまざまなbabelライブラリを使用するWebpackが、コードをブラウザーが理解できるものに変換するという事実に要約されます。 同時に、ブレークポイントを挿入でき、何かで生成されたものではなく、理解できる元のJSXスクリプトで生成されたものを理解できることを非常に嬉しく思います。 幸いなことに、この問題は解決可能です。 次の手順を正常に完了するために、上記で推奨される必須および開発の依存関係が接続されていると想定され、この部分のpackage.jsonファイルは次のようになります。
"dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", "requirejs": "^2.3.2", }, "devDependencies": { "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-plugin-transform-regenerator": "^6.22.0", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.22.0", "babel-preset-stage-0": "^6.22.0", "react-frame-component": "^0.6.6", "webpack": "^2.2.1", "webpack-dev-server": "^2.3.0" }
Webpack2を使用することが重要です。最初はすべてが異なります。 次の内容の静的\ .babelrcファイルを作成します（ご想像のとおり、これはBabelの構成です）。
{ "presets": ["react", "es2015", "stage-0"], "plugins": ["transform-regenerator"] }
次の内容の静的\ webpack.config.jsファイルを作成します。
var packageJSON = require('./package.json'); var path = require('path'); var webpack = require('webpack'); module.exports = { devtool: 'source-map', entry: './index.js', output: { path: path.join(__dirname, 'generated'), filename: 'app-bundle.js'}, resolve: {extensions: ['.js', '.jsx']}, plugins: [ new webpack.LoaderOptionsPlugin({ debug: true}), new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("development") } }) ], module: { rules: [ { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ } ] }, devServer: { noInfo: false, quiet: false, lazy: false, watchOptions: { poll: true } } }
以下に注意してください：
- エントリポイントは、以前に定義されたindex.jsスクリプトです。
- コンパイル結果は、静的な\生成されたフォルダーに入れられます
- 設定は開発用に設定されています。 将来的には、webpackプロファイルを使用して、dev \ test \ prod環境間で構成を分割することが理にかなっています。 詳細については、ドキュメントを参照してください（以下のリンク）
- 結果のスクリプトは「/generated/app-bundle.js」と呼ばれます。 greeting.htmlで指定しました。
package.json : "scripts": { "build": "webpack -d" },
キー「-d」は「開発」を意味します。-p「本番」を使用すると、結果は縮小されます。 原則として、これは重要ではなく、デビューする能力には影響しません。 Node.jsコマンドプロンプトでnpm run buildコマンドを実行してコンパイルします。 .gitignore npmに追加-*。ログと生成された/。
このような最小限の例でも、webpackのコンパイルには数秒かかります（最大8秒かかります）。 これはたくさんあります。 自動再コンパイルを構成することは理にかなっています。 この目的のために、webpack-dev-serverパッケージが以前にインストールされ、その構成パラメーターがdevServerセクションに追加されました。 このタスクは、スクリプトによって起動されるバックグラウンドプロセスとして実装されます。 このスクリプトを実行するには、要素「“ dev”：“ webpack-dev-server --content-base app /””」を package.jsonファイルのスクリプトセクションに追加する必要があります（ここで「dev」はスクリプトエイリアスです。任意のものを使用できます）。 これにより、JSXスクリプトがあるapp /フォルダーの変更を監視するプロセスが設定されます。
次に、 npm run devコマンドを実行します。 その結果、Node.js Expressサーバーが起動し、最初にwebpackの通常のコンパイルが実行され、必要なものがすべてキャッシュされます。その後、変更のたびに増分的に再コンパイルされます。 このサーバーには多くのオプションがあります。元のドキュメントを参照してください（以下のリンク）。 npmコマンドラインで他のアクションを実行する必要がある場合は、新しいアクションを開始する必要があります。これは現在ビジー状態です。
そして、これですべてです。 アプリケーションを起動すると、世界が楽しめます。
そしてもう一つ
完全を期すために、コンソールなしで実行できることに言及する必要があります。 npmを使用するには、かなり便利なmavenプラグインfrontend-maven-pluginがあります。 彼の参加によるpomファイルの断片を以下に示します。
Mavenプラグインを接続する
<plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <version>1.4.2.RELEASE</version> </plugin> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.0</version> <configuration> <workingDirectory>src/main/resources/static</workingDirectory> </configuration> <executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v6.9.4</nodeVersion> <npmVersion>4.1.1</npmVersion> </configuration> </execution> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>install</arguments> <npmRegistryURL>http://some_url> </configuration> </execution> <execution> <id>npm run build</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run build</arguments> </configuration> </execution> </executions> </plugin> </plugins>