4
私はReact/Node/Expressアプリケーションを持っており、Webpackを使って構築しています。React、Node、Webpackでpug/jadeテンプレートをレンダリングするにはどうすればよいですか？
現在、のようなディレクトリの構造は次のとおりです。これは私のwebpack.config.js
var path = require("path");
var DIST_DIR = path.resolve(__dirname, "public");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/client/main.js",
output: {
path: DIST_DIR + "/app",
filename: "main.js",
publicPath: "/app"
},
module:{
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query:{
presets:["react", "es2015", "stage-2"]
}
}
]
}
};
module.exports = config;
ある
node_modules
public
app
main.js
main.map.js
index.html
src
client
components
Home.js
Header.js
Root.js
User.js
main.js
server
views
index.html
index.js
package.json
webpack.config.js
そして、これは私のpackage.jsonある
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "/src/server/index.js",
"scripts": {
"start": "npm run build",
"build": "webpack -d && xcopy \"src/server/views/index.html\" \"public\" /F /Y && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
"build:prod": "webpack -p && xcopy \"src/server/views/index.html\" \"public/\" /F /Y"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.0"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"body-parser": "^1.15.2",
"express": "^4.14.0",
"jquery": "^3.1.1",
"lodash": "^4.17.2",
"morgan": "^1.7.0",
"pug": "^2.0.0-beta6",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
これは動作します。私のindex.htmlはこれです：私はNPM開始を行うと
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Basics</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<script src="/app/main.js"></script>
<!--Everything will be bundled in app/mainjs -->
</body>
</html>
、アプリケーションが構築し、サブコンポーネントがロードされたと私は、localhost:8080に移動したindex.htmlを見ることができます。私が今やりたいことは代わりのindex.htmlを有するのである
import React from 'react';
import { render } from 'react-dom';
import {Router, Route, browserHistory, IndexRoute} from "react-router";
//import newly created components
import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";
class App extends React.Component {
render() {
return (
<Router history={browserHistory}>
<Route path={"/"} component={Root}>
<IndexRoute component={Home}/>
<Route path={"user/:id"} component={User}/>
<Route path={"home"} component={Home}/>
</Route>
<Route path={"home"} component={Home}/>
</Router>
);
}
}
render(<App />, window.document.getElementById('app'));
、私は正確でindex.pugを持ちたい：ロードされたスクリプトは次のようである「アプリ/ main.js」ですindex.htmlと同じコンテンツを作成し、サーバファイルindex.jsからpugテンプレートを提供します。どうすればいいのか教えていただけますか？私はいくつかのことを試みましたが、それは物事をあまりにも乱してしまったので、元の状態に戻りました。ルートディレクトリに