[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>[Webpack][React]既存サイトにさっくりReactを導入するためのWebpack設定
[Webpack][React]既存サイトにさっくりReactを導入するためのWebpack設定
WordPressとかで構築されててViewに必要なデータは揃ってるしAPI作るのが面倒な場合。
やりたいことは、こんな感じでファイルごとに異なるJavascriptファイルを読み込む。Javascriptに引き渡す値はViewに書く。
front-page.php
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div id="App"></div>
- </body>
- <?php
- $data = [
- 'title' => 'front-page.php',
- 'desc' => 'テキストボックスを変更するとタイトルが変わるよ'
- ];
- ?>
- <script>
- const data = <?php echo json_encode($data); ?>;
- </script>
- <script src="/js/front-page.bundle.js"></script>
- </html>
archive.php
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div id="App"></div>
- </body>
- <?php
- $data = [
- 'title' => 'archive.php',
- 'desc' => 'テキストボックスを変更するとタイトルが変わるよ'
- ];
- ?>
- <script>
- const data = <?php echo json_encode($data); ?>
- </script>
- <script src="/js/archive.bundle.js"></script>
- </html>
node moduleのインストール
- $ node -v
- v8.9.1
- $ npm -v
- 5.6.0
- $ npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/cli @babel/preset-env @babel/preset-react react react-dom
package.json
2019年3月15日現在、各モジュールのバージョンは下記となる
- "devDependencies": {
- "@babel/cli": "^7.2.3",
- "@babel/core": "^7.3.4",
- "@babel/preset-env": "^7.3.4",
- "@babel/preset-react": "^7.0.0",
- "babel-loader": "^8.0.5",
- "react": "^16.8.4",
- "react-dom": "^16.8.4",
- "webpack": "^4.29.6",
- "webpack-cli": "^3.2.3"
- }
スクリプトも追記しておく。
- "scripts": {
- "build": "webpack --mode=production",
- "develop": "webpack --mode=development",
- "watch": "webpack --mode=development --watch"
- },
ディレクトリ、ファイル構成
最終的なディレクトリ、ファイル構成はこのようにする前提で。
- develop
- | archive.php
- | front-page.php
- |
- +---js // ビルド後出来上がったjsファイル
- | archive.bundle.js
- | front-page.bundle.js
- |
- \---webpack
- | package-lock.json
- | package.json
- | webpack.config.js
- |
- +---archive
- | App.js
- | index.js
- |
- \---front-page
- App.js
- index.js
webpack.conf
- module.exports = {
- devtool: 'inline-source-map',
- mode: 'development',
- entry: {
- "front-page": './front-page/index.js',
- "archive": './archive/index.js'
- },
- // ファイルの出力設定
- output: {
- // 出力ディレクトリ
- // __dirnameは webpack.config.js があるディレクトリの絶対パス
- path: __dirname + '/../js/',
- // 出力ファイル名
- // [name]はentryがハッシュの場合、keyで置換される
- filename: '[name].bundle.js'
- },
- module: {
- rules: [{
- test: /\.js?$/,
- exclude: /node_modules/,
- use: {
- loader: 'babel-loader',
- options: {
- "presets": ["@babel/preset-env", "@babel/preset-react"]
- },
- }
- }]
- }
- };
JSXファイル
ビルドの起点となるfront-page/index.js
- import React from 'react';
- import ReactDOM from 'react-dom';
- import App from './App';
- ReactDOM.render(
- <App data={data} />,
- document.getElementById('App')
- );
front-page/index.jsからimportされるApp.js
- import React from 'react';
- export default class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = props.data;
- }
- onChangeTitle(e) {
- this.setState({'title': e.target.value});
- }
- render() {
- return <section className="hello-world">
- <h1>{this.state.title}</h1>
- <p>{this.props.data.desc}</p>
- <input type="text" value={this.state.title} onChange={this.onChangeTitle.bind(this)} />
- </section>
- }
- }
ビルド後はindex.jsとApp.jsが一つのファイルになったfront-page.bundle.jsができる。
archiveも同様にindex.htmlとApp.jsを作成し下記コマンドを打つ。
- npm run build
エラーが無ければOK
| 投稿日 | 2019年3月15日 04:16 |
|---|---|
| カテゴリ | JavaScript |
| タグ | React | webpack | 設定 |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1801 |
コメント