如何使用React，Node和Webpack渲染哈巴狗/玉器模板？

Question

我有一個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模板。 你能告訴我我該怎么做嗎？ 我嘗試了幾件事，但是事情變得太混亂了，所以又恢復到原始狀態。

Answer 1

在根目錄中：

$ 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

Answer 2

在webpack.config.js中觀看babel loader測試。

test: /\.js?/,

應該

test: /\.jsx?/,

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

Answer 3

您可以使用pug-as-jsx： https : //github.com/bluewings/pug-as-jsx-loader

您將在此處找到執行此操作的步驟：我可以將pug（ex-jade）與react框架一起使用嗎？

關於此的博客： https : //medium.com/nishantsblog/pug-templates-for-react-presentation-components-7610967954a

如何使用React，Node和Webpack渲染哈巴狗/玉器模板？

問題描述

3 個解決方案

解決方案1
0 2017-05-08 20:19:47

解決方案2
0 2017-07-17 15:34:12

解決方案3
0 2018-03-22 16:10:42

如何使用React，Node和Webpack渲染哈巴狗/玉器模板？

問題描述

3 個解決方案

解決方案1 0 2017-05-08 20:19:47

解決方案2 0 2017-07-17 15:34:12

解決方案3 0 2018-03-22 16:10:42

解決方案1
0 2017-05-08 20:19:47

解決方案2
0 2017-07-17 15:34:12

解決方案3
0 2018-03-22 16:10:42