node.js – 如何使用React,Node和Webpack渲染pug / jade模板？

我有一个React / Node / Express应用程序,我正在使用Webpack来构建它.

目前,目录的结构如下：

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

这是我的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;

这是我的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是这样的：

<!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>

当我执行npm start时,应用程序构建,我可以转到localhost：8080并查看index.html,并加载子组件.加载的脚本是’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'));

我现在想要做的不是使用index.html,而是希望有一个index.pug与index.html具有完全相同的内容,并从服务器文件index.js提供pug模板.你能告诉我怎么做吗？我尝试了一些东西,但它把事情弄得太乱了,所以又恢复了原状.

解决方法

在根目录中：

$npm install pug --save

服务器/ index.js：

var app = require('express')();
app.set('view engine','pug');
app.get('/',function (req,res) {
  res.render('index');
});

服务器/视图/ 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

node.js – 如何使用React,Node和Webpack渲染pug / jade模板？

解决方法

相关文章