- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正尝试按照本教程创建静态站点 http://jxnblk.com/writing/posts/static-site-generation-with-react-and-webpack/
我目前收到此错误:ReferenceError 中的错误:文档未定义
这是我的 app.jsx 文件:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router';
import routes from './config/routes';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<Router>{routes}</Router>
);
}
}
export default App;
module.exports = function render(locals, callback) {
var html = React.renderToStaticMarkup(React.createElement(App, locals))
callback(null, '<!DOCTYPE html>' + html)
}
路线:
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Layout from '../components/layout';
import Home from '../components/home';
export default (
<Route path="/" component={Layout}>
<IndexRoute component={Home} />
</Route>
);
layout.jsx 组件:
import React from 'react';
import Nav from './nav';
import Footer from './footer';
import Styles from '../styles.scss';
class Layout extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<div id="layout" className={Styles.main}>
<Nav />
{this.props.children}
<Footer />
</div>
)
}
}
Layout.PropTypes = {
children: React.PropTypes.object.isRequired
}
export default Layout;
和我的 webpack.config.js 文件:
/* eslint-disable */
var path = require('path'),
webpack = require('webpack'),
autoprefixer = require('autoprefixer'),
OpenBrowserPlugin = require('open-browser-webpack-plugin');
StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
data = require('./data');
var configServe = {
port: 9100,
};
module.exports = {
devServer: {
hot: true,
inline: true,
historyApiFallback: true,
progress: true,
port: configServe.port,
},
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:' + configServe.port,
path.resolve(__dirname, './src/app.jsx'),
],
output: {
path: __dirname,
filename: './dist/bundle.js',
libraryTarget: 'umd'
},
module: {
loaders: [
{
// JSX files :
test: /\.js[x]?$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react',
},
{
// CSS files :
test: /\.css?$/,
include: path.resolve(__dirname, 'src'),
loader: 'style-loader!css-loader!postcss-loader',
},
{
// SCSS files :
test: /\.scss?$/,
include: path.resolve(__dirname, 'src'),
loader: 'style-loader!css-loader!postcss-loader!sass',
},
{
test: /\.(png|jpg)$/,
include: path.resolve(__dirname, 'src'),
loader: 'file-loader'
},
{
test: /\.svg$/,
loader: 'svg-inline'
}
],
},
postcss: [
autoprefixer({ browsers: ['last 3 versions'] }),
],
plugins: [
// Avoid publishing files when compilation fails
new StaticSiteGeneratorPlugin('./dist/bundle.js', data.routes, data),
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new OpenBrowserPlugin({ url: 'http://localhost:' + configServe.port }),
],
resolve: {
extensions: ['', '.js', '.jsx'],
},
stats: {
// Nice colored output
colors: true,
},
// Create Sourcemaps for the bundle
devtool: 'source-map',
};
希望有人能帮我解决这个问题。我想最终以一种非固执己见的方式将这一切捆绑在一起,用 React 创建静态网页并发布到 github 上。
最佳答案
我猜是这一行导致了错误:
var html = React.renderToStaticMarkup(React.createElement(Root, locals))
您正在使用一些 Root
组件,但从您的代码得出的结论是它没有定义。它也在教程中定义(你已经指出)这一行:var Root = require('./components/Root.jsx')
关于javascript - 使用 webpack 响应静态站点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36929680/
最近我用 php 建立了一个网站,但他们的旧网站都是 HTML 格式的。所以现在我不知道使用 .htaccess 将所有这些旧链接重定向到新站点(可能将所有带有 HTML 的链接重定向到主域)的最佳方
我创建了一个新的 WordPress 网站,它是我旧网站的更名版本。它有一个新的域和一个新的设计。除此之外,其他一切都是相同的,包括内容和链接结构。现在我想完全重定向旧链接。与旧帖子一样,标签和类别
我想使用 WatiN测试我正在开发的网站的功能。理想情况下,我会在测试开始运行之前以编程方式部署网站 (asp.net MVC3),然后在每次测试之前刷新数据。这可能吗? 最佳答案 在此处阅读有关使用
我们的网站使用我们自己定制的 session 状态管理,与 ASP.NET session 状态分开。但是由于少数特殊页面使用 SQL Server Reporting Services,我们还需要启
不久前我看到一个网站,其中有 JavaScript/HTML/CSS 栏目,下面有实际代码的样子。有点像 jsFiddle,但它有用户示例和演示。有谁知道这个网站的名字吗?我到处都找不到它!谢谢! 最
我们的核心数据库出现问题,该数据库已由前一天的备份数据库恢复。 此后,网站工作正常,但我们在发布任何更改时遇到问题。一旦点击发布按钮,“发布正在初始化..”消息就会持续很长时间。截至“发布开始/结束”
我们的核心数据库出现问题,该数据库已由前一天的备份数据库恢复。 此后,网站工作正常,但我们在发布任何更改时遇到问题。一旦点击发布按钮,“发布正在初始化..”消息就会持续很长时间。截至“发布开始/结束”
Maven 不仅仅是一款项目构建和依赖管理工具,它还能够聚合项目信息,促进项目团队间地交流。POM 中可以包含各种项目信息,例如:项目描述、SCM 地址、许可证信息,开发者信息等。用户可以使用 Mav
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭上个月。 Improve this ques
您知道哪些网站正在使用 Silverlight?此信息将帮助我们决定何时采用 Silverlight 平台。 这些网站应该是面向公众的并且被认为是高流量的。 (每月至少 300,000 次点击)。 我
我尝试通过 VS2017 中的发布上下文菜单将我的 .net 核心站点部署到 Azure,偶尔(大约三分之一的部署),我收到以下错误。 Web deployment task failed. (Web
我为 20 个不同的国家/地区创建了一个包含 20 个站点(每个站点一个不同的域)的 Django 项目。这些站点共享所有内容:代码库、数据库、网址、模板等。 他们唯一不共享的是我在每个站点设置文件中
如何将商店页面添加到我使用 jekyll 和基础构建的网站? 任何自动化平台/方法都可以做到这一点。 谢谢。 最佳答案 您可以使用 snipcart .有一个blog post和一个 demo sit
我部署了一个服务结构集群,域为 foo.northcentralus.cloudapp.azure.com 它具有单一节点类型和单一公共(public) IP 地址/负载均衡器。 假设我部署了以下
我不是一个大的typ3 专家,也无法访问我正在使用的typ3 实例中的typoscript 选项(这是一个非常大的站点,我没有这样做的授权)。所以我希望这个问题适合 stackoverflow(如果没
我们正在对我们的 Drupal 站点进行性能调整。 我们正在使用 Siege 来衡量性能(作为 drupal 访问者)。 环境: Nginx + FastCGI + Memcache Siege 运行
我搜索了 SO、SU 和 SP.SE寻求解决方案,但找不到我需要的东西。我正在寻找一个解决方案,它可能是一个脚本或一些其他非编码方法/工具。 我正在尝试编写一个脚本(供其他人使用)或某种其他形式的自动
我有一个 Django 站点,它使用本地化中间件与 gettext 和 trans/blocktrans 模板标签相结合,根据用户代理字符串中的首选语言向访问者显示不同的页面(这似乎是在 Django
我是 Drupal 新手。是否可以设置所有内容并在服务器上部署 Drupal?我的意思是像放入内容、设置模块等...,然后将它们全部放到生产服务器上? 最佳答案 当然。 复制所有文件 编辑数据库凭证(
我想将以下行添加到我的 head.html仅在运行时 jekyll serve本地: 如果可能的话,我正在考虑使用一些简单的液体检查。 最佳答案 当你做 jekyll serve本地默认 {{
我是一名优秀的程序员,十分优秀!