Question

我对此很新，但在升级到webpack 2并为我的项目添加jsx支持时，我更改了gonfig规则以匹配api在Webpack 2中调用的内容并添加了babel-loader。我在浏览器中看到的只是“找不到/".

当我运行DEBUG = express：* node index.js时我明白了：

.../Sites/practice/index.js:1
(function (exports, require, module, __filename, __dirname) { import React from 'react'
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:146:18)
    at node.js:404:3

webpack.config.js

var webpack = require('webpack')

module.exports = {
  entry: './index.js',

  output: {
    path: 'public',
    filename: 'bundle.js',
    publicPath: '/'
  },

  plugins: process.env.NODE_ENV === 'production' ? [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ] : [],

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: [{
          loader: 'babel-loader',
          options: { presets: ['es2015', 'react'] },
        }],
      },
      {
        test: /\.jsx$/,
        exclude: [/node_modules/],
        use: [{
          loader: 'babel-loader',
          options: { presets: ['es2015', 'react'] },
        }],
      }
    ]
  },
  resolve: {
    extensions: [
          '.jsx',
          '.js',
      ]
  },
}

server.js

var express = require('express')
var path = require('path')
var compression = require('compression')
var React = require('react')
var renderToString = require('react-dom/server')
var RouterContext = require('react-router')
var match = require('react-router')
var routes = require('./modules/routes')
var app = express()

app.use(compression())

// serve our static stuff like index.css
app.use(express.static(path.join(__dirname, 'public'), {index: false}))
// send all requests to index.html so browserHistory works
app.get('*', (req, res) => {
  match({ routes, location: req.url }, (err, redirect, props) => {
    if (err) {
      res.status(500).send(err.message)
    } else if (redirect) {
      res.redirect(redirect.pathname + redirect.search)
    } else if (props) {
      // hey we made it!
      const appHtml = renderToString(<RouterContext {...props}/>)
      res.send(renderPage(appHtml))
    } else {
      res.status(404).send('Not Found')
    }
  })
})

function renderPage(appHtml) {
  return `
    <!doctype html public="storage">
    <html>
    <meta charset=utf-8/>
    <title>My First React Router App</title>
    <link rel=stylesheet href=/index.css>
    <div id=app>${appHtml}</div>
    <script src="/bundle.js"></script>
   `
}

var PORT = process.env.PORT || 8080
app.listen(PORT, function() {
  console.log('Production Express server running at localhost:' + PORT)
})

index.js

import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
import routes from './modules/routes'

render(
  <Router routes={routes} history={browserHistory}/>,
  document.getElementById('app')
)

和package.json：

    {
  "name": "tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:dev": "webpack-dev-server --inline --content-base public/ --history-api-fallback",
    "start:prod": "npm run build && node server.bundle.js",
    "build:client": "webpack",
    "build:server": "webpack --config webpack.server.config.js",
    "build": "npm run build:client && npm run build:server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "compression": "^1.6.1",
    "express": "^4.13.4",
    "if-env": "^1.0.0",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "http-server": "^0.8.5",
    "sass-loader": "^6.0.3",
    "static-site-generator-webpack-plugin": "^3.4.1",
    "style-loader": "^0.16.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^1.14.1"

  }
}

我知道我错过了什么，但不知道是什么。我已经在这里搜索并尝试了其他建议，但它们都没有为我工作。

结构：

-root
    -modules
        -routes.js
        -App.jsx
        -othercomponents...
    -node_modules
    -public
        -index.html
        -index.css
    -data.js
    -index.js
    -package.json
    -server.js
    -webpack.config.js
    -webpack.server.config.js
    -index.js

Answer 1

我认为可能存在两个不同的问题：

我在浏览器中看到“找不到/".

这看起来像一个明确的问题，是404的响应状态？在您的快速服务器中尝试更改：

app.get('*', (req, res) => {

为：

app.get('/', (req, res) => {

从'react'导入React

SyntaxError：意外的令牌导入

这是一个节点错误 - node.js不支持这样的ES6模块导入。您可以将执行环境更改为babel-node，并且它应该可以正常工作。

这实际上是我试图调查解决方案 - babel-node表示它不是用于生产用途，但我有困难找到一种在ES6中编写代码的方法，但在服务器上也使用它它没有通过转换器进行处理。

Webpack 2'找不到/'

1 个答案: