Question

我上周刚刚开始使用React，我在a tutorial关注static-render-webpack-plugin时遇到问题。

如果你想仔细看看，我已经把代码online at GitHub。

在完成教程并进行了一些更改之后（我添加了babel-core，我将js加载器更改为babel-loader，并且输入点url需要一个小的更正），当我尝试运行webpack -p时生成静态文件我得到以下错误：

ERROR in ./src/entry.js
Module build failed: SyntaxError: .../src/entry.js: Unexpected token (10:2)
   8 |
   9 | const routes = (
> 10 |   <Route path="/" handler={RootPage}>
     |   ^

我认为这可能与the changes made with the latest version of react-router有关。我使用的是最新版本，但教程的语法看起来可能是在v.1.0之前编写的。例如，我认为教程中要将其添加到src/entry.js文件的部分：

if (typeof document != 'undefined') {
  Router.run(routes, path, (Root) => {
    React.render(<Root/>, document);
  });
}

可能需要重写为这样的东西（但我不确定这是否正确）：

if (typeof document != 'undefined') {
  ReactDOM.render(routes, document);
}

显然有更多的事情发生，因为当我尝试重写的代码片段然后运行webpack-dev-server时，我得到相同的错误消息 - 这是它应该唯一一次点击该代码。（是的，我在页面顶部添加了import ReactDOM from 'react-dom';，并在"react-dom": "^0.14.7",添加了package.json。）

我确信此部分（也在src/entry.js上）也需要重写以匹配最新的react-router，但我不确定如何：

export default function(path, props, callback) {
  Router.run(routes, path, (Root) => {
    const html = React.renderToString(<Root/>);
    callback('<!doctype html>' + html);
  });
}

提前感谢您提供任何帮助或提示。

Answer 1

你的代码坏了，因为Webpack不知道如何将JSX转换为ES5。你已经在webpack配置中指定了babel-loader作为JS文件的加载器，但遗憾的是Babel 6没有开箱即用，你需要包含“插件”，其中包含编译不同语法的规则。 ES5。在这种情况下，您需要es2015预设支持所有ES6语法，react预设支持JSX。您还缺少要尝试导入到webpack配置中的extract-text-webpack-plugin。通过NPM抓住这些：

npm i -D babel-preset-2015 babel-preset-react extract-text-webpack-plugin

然后，将预设添加到js / jsx文件的加载器部分中的webpack.config.js文件中：

{                                                                                                                                                                                         
  test: /\.(js|jsx)?$/,                                                                                                                                                                                   
  loader: 'babel',                                                                                                                                                                            
  exclude: /node_modules/,                                                                                                                                                                           
  query: {                                                                                                                                                                                           
    presets: ['es2015', 'react']                                                                                                                                                          
  }                                                                                                                                                                                                  
}

我将您的仓库分叉并进行了这些更改，并且能够进一步完成编译过程。似乎存在特定于您的项目的模块依赖项，您仍然需要解决这些问题。

使用static-render-webpack-plugin的React-router问题

1 个答案: