如何使用React，Node和Webpack渲染帕格/玉石模板？

我有一個React/Node/Express應用程序，我正在使用Webpack來構建它。如何使用React，Node和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啓動，應用程序版本，我可以去localhost:8080，看到的index.html，與加載子。加載的腳本是「應用程序/ 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提供帕格模板。你能告訴我我該怎麼做嗎？我嘗試了一些東西，但是它把事情弄得太多了，所以恢復到原來的狀態。

來源

2016-12-04 McFiddlyWiddly

在根目錄下：

$ 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

來源

2017-05-08 20:19:47

注意你的通天裝載機測試，在webpack.config.js中。

test: /\.js?/,

應該

test: /\.jsx?/,

在你的正則表達式的?意味着前面的字符是可選的。在我們的例子中，我們希望babel在*.js和*.jsx上運行。

來源

2017-07-17 15:34:12

如何使用React，Node和Webpack渲染帕格/玉石模板？

回答

相關問題