如何使用React，Node和Webpack渲染哈巴狗/玉器模板？
[英]How do I render a pug/jade template with React, Node and Webpack?
问题描述
I have a React/Node/Express application, and I am using Webpack to build it. 
我有一个React / Node / Express应用程序，并且正在使用Webpack来构建它。
Currently, the structure of the directory is as such: 当前，目录的结构如下：
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
This is my webpack.config.js 这是我的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;
And this is my package.json 这是我的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"
}
}
This works. 这可行。 My index.html is this: 我的index.html是这样的：
<!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>
When I do npm start, the application builds, and I can go to localhost:8080 and see index.html, with the subcomponents loaded. 当我执行npm start时，将构建应用程序，并且可以转到localhost:8080并查看index.html，其中已加载了子组件。 The script loaded is 'app/main.js' which is the following: 加载的脚本为“ app / main.js”，如下所示：
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'));
What I want to do right now is instead of having the index.html, I want to have an index.pug with exactly the same content as index.html, and serve the pug template from the server file index.js. 我现在要执行的操作不是拥有index.html，而是要拥有一个index.pug，其内容与index.html完全相同，并从服务器文件index.js提供pug模板。 Can you tell me how I can do that? 你能告诉我我该怎么做吗？ i tried a few things, but it messed things up too much, so reverted back to original situation. 我尝试了几件事，但是事情变得太混乱了，所以又恢复到原始状态。
3 个解决方案
解决方案1
0 2017-05-08 20:19:47
In the root directory: 在根目录中：
$ npm install pug --save
server/index.js: 服务器/ index.js：
var app = require('express')();
app.set('view engine', 'pug');
app.get('/', function (req, res) {
res.render('index');
});
server/views/index.pug: 服务器/视图/ index.pug：
doctype html
html(lang='en')
head
meta(charset='UTF-8')
title React Basics
//- 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')
body
#app
script(src='/app/main.js')
//- Everything will be bundled in app/mainjs
解决方案2
0 2017-07-17 15:34:12
Watch your babel loader test, in webpack.config.js. 在webpack.config.js中观看babel loader测试。
test: /\.js?/,
should be 应该
test: /\.jsx?/,
The ? ? in your regex means the preceding char was optional. 在您的正则表达式中，意味着前面的字符是可选的。 In our case, we want babel to run on *.js and *.jsx . 在我们的例子中，我们希望babel在*.js和*.jsx上运行。
解决方案3
0 2018-03-22 16:10:42
You can use pug-as-jsx : https://github.com/bluewings/pug-as-jsx-loader 您可以使用pug-as-jsx： https : //github.com/bluewings/pug-as-jsx-loader
You will find steps to do it here : can i use pug (ex-jade) with react framework? 您将在此处找到执行此操作的步骤：我可以将pug（ex-jade）与react框架一起使用吗？
A blog about this : https://medium.com/nishantsblog/pug-templates-for-react-presentation-components-7610967954a 关于此的博客： https : //medium.com/nishantsblog/pug-templates-for-react-presentation-components-7610967954a
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.