我正在使用我自己的自定义webpack构建react router tutorial,我得到了一个“意外的令牌<”错误。这通常是由于巴贝尔transpiler being incorrectly specified。但是,这不是这种情况。我的开发工具在开发构建期间按照指定工作,但在生成构建的相同设置下失败。我不明白为什么。
我的.babelrc文件有正确的预设:
...
"presets": ["es2015", "stage-0", "react"]
...
我的webpack.config.js使用它来转换dev:
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel?cacheDirectory=' + PATHS.cache],
exclude: PATHS.node_modules
}...
我的webpack.config.js使用它来转换为prod:
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: PATHS.node_modules,
}...
我的package.json有所有正确的库:
...
"devDependencies": {
"babel-core": "^6.0.20",
"babel-eslint": "^4.1.3",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.0.15",
...
"dependencies": {
"react": "^0.14.6",
"react-d3-wrap": "^2.1.2",
"react-dom": "^0.14.6",
"react-redux": "^4.4.5",
"react-router": "^2.7.0",
...
奇怪的是,Chrome报告说index.html中的html实际上已经替换了<。em>主.js文件。因而错误。
但是,直接检查文件会发现情况并非如此:
您可以找到构建here
的回购知道会发生什么事吗?
编辑:当我的服务器请求捆绑包时,它会返回html。所以也许prod-server有问题:
var express = require('express');
var path = require('path');
var compression = require('compression');
var app = express();
app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, 'dist', 'index.html'))
});
var PORT = process.env.PORT || 8080;
app.listen(PORT, function () {
console.log("Production express server running at localhost: " + PORT)
});
EDIT2 :我在这里解析请求的方式有问题。如果我删除:
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
然后我可以向捆绑包发送请求并返回捆绑包。使用此行,发送获取包的请求将返回index.html。
答案 0 :(得分:1)
正如agmcleod建议的那样,我需要更改我的快速路由器处理请求的方式:get('*', ...
需要切换到get('/', ...
。另外,我需要将我的webpack公共路径更改为'/'
而不是path.join(__dirname, 'dist')
。 Webpack将完全限定的目录放在我的src属性中,并没有使它们相对于我的快速服务器中的静态路径。
引用的回购中还有其他问题,但我认为它们与发布的问题无关。
感谢@DavidTyron和@agmcleod让我走上正轨。