操作系统：Windows 10 Pro
webpack：2.5.1
节点：6.10.2
所以，在项目的根目录中包含.babelrc：
{
"plugins": ["transform-async-to-generator"]
}
导致构建（npm run build）失败，并显示以下错误消息：
ERROR in ./client/app.js
Module build failed: SyntaxError: C:/Users/d0475/Documents/Projects/learn-redux-graphql/client/app.js: Unexpected token (47:2)
45 | */
46 | render(
> 47 | <ApolloProvider store={store} client={client}>
| ^
48 |
49 | <Router history={history}>
50 | <Route path="/" component={App}>
这里有什么问题？
我的package.json是：
"scripts": {
"build:webpack": "set NODE_ENV=production && webpack --config webpack.config.prod.js",
"build": "npm run clean && npm run build:webpack",
"test": "NODE_ENV=production mocha './tests/**/*.spec.js' --compilers js:babel-core/register",
"clean": "rimraf public",
"start": "node devServer.js"
}
我的webpack.config.prod是：
module.exports = {
devtool: 'source-map',
context: __dirname,
entry: {
main: path.resolve(__dirname, './client/app'),
},
output: {
path: path.join(__dirname, '/public'),
filename: '[name]-[hash].js',
publicPath: '/'
},
plugins: [
new Dotenv({
path: './.env',
safe: true
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': "'production'"
}
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
}),
new HtmlWebpackPlugin({
title: 'Flamingo City',
filename: 'index.html',
template: './index_template.ejs',
}),
new CopyWebpackPlugin([
{ from: '404.html' },
{ from: 'manifest.json' },
{ from: 'images', to: 'images' },
]),
new OfflinePlugin({
publicPath: '/',
safeToUseOptionalCaches: true,
caches: {
main: [
'main-*.js',
'index.html',
],
additional: [
':externals:'
],
optional: [
':rest:'
]
},
externals: [
'/'
],
ServiceWorker: {
navigateFallbackURL: '/',
events: true
},
AppCache: {
FALLBACK: {
'/': '/offline-page.html'
},
events: true
}
})
],
module: {
rules: [
// js
{
test: /\.js$/,
use: ['babel-loader'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
}
]
}
};
我的app.js是：
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route, IndexRoute } from 'react-router'
import 'babel-polyfill';
import { ApolloProvider, graphql, gql } from 'react-apollo';
import client from './apolloClient';
import App from './components/App';
import Single from './components/Single';
import PhotoGrid from './components/PhotoGrid';
import css from './styles/style.styl';
import store, { history } from './store';
import Raven from 'raven-js';
import { sentry_url } from './data/config';
if(window) {
Raven.config(sentry_url).install();
}
import * as OfflinePluginRuntime from 'offline-plugin/runtime';
if (process.env.NODE_ENV === 'production') {
OfflinePluginRuntime.install();
}
render(
<ApolloProvider store={store} client={client}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={PhotoGrid} />
<Route path="/view/:postId" component={Single}></Route>
</Route>
</Router>
</ApolloProvider>,
document.getElementById('root')
);
NPM-的debug.log：
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using npm@3.10.10
3 info using node@v6.10.2
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle learn-redux-graphql@1.0.0~prebuild: learn-redux-graphql@1.0.0
6 silly lifecycle learn-redux-graphql@1.0.0~prebuild: no script for prebuild, continuing
7 info lifecycle learn-redux-graphql@1.0.0~build: learn-redux-graphql@1.0.0
8 verbose lifecycle learn-redux-graphql@1.0.0~build: unsafe-perm in lifecycle true
9 verbose lifecycle learn-redux-graphql@1.0.0~build: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\.bin;C:\Users\d0475\Documents\Cmder\bin;C:\Program Files\Git\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\share\vim\vim74;C:\Users\d0475\Documents\Cmder\vendor\conemu-maximus5\ConEmu\Scripts;C:\Users\d0475\Documents\Cmder\vendor\conemu-maximus5;C:\Users\d0475\Documents\Cmder\vendor\conemu-maximus5\ConEmu;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\GNU\GnuPG\pub;C:\Program Files\Git\cmd;C:\Program Files\Calibre2\;C:\Program Files\nodejs\;C:\Program Files (x86)\Yarn\bin;C:\Users\d0475\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\d0475\AppData\Local\Microsoft\WindowsApps;;C:\Users\d0475\AppData\Local\now-cli;C:\Users\d0475\AppData\Roaming\npm;C:\Users\d0475\AppData\Local\Yarn\bin;C:\Users\d0475\Documents\Cmder
10 verbose lifecycle learn-redux-graphql@1.0.0~build: CWD: C:\Users\d0475\Documents\Projects\learn-redux-graphql
11 silly lifecycle learn-redux-graphql@1.0.0~build: Args: [ '/d /s /c', 'npm run clean && npm run build:webpack' ]
12 silly lifecycle learn-redux-graphql@1.0.0~build: Returned: code: 1 signal: null
13 info lifecycle learn-redux-graphql@1.0.0~build: Failed to exec build script
14 verbose stack Error: learn-redux-graphql@1.0.0 build: `npm run clean && npm run build:webpack`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:886:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid learn-redux-graphql@1.0.0
16 verbose cwd C:\Users\d0475\Documents\Projects\learn-redux-graphql
17 error Windows_NT 10.0.15063
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
19 error node v6.10.2
20 error npm v3.10.10
21 error code ELIFECYCLE
22 error learn-redux-graphql@1.0.0 build: `npm run clean && npm run build:webpack`
22 error Exit status 1
23 error Failed at the learn-redux-graphql@1.0.0 build script 'npm run clean && npm run build:webpack'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the learn-redux-graphql package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error npm run clean && npm run build:webpack
23 error You can get information on how to open an issue for this project with:
23 error npm bugs learn-redux-graphql
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls learn-redux-graphql
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
答案 0 :(得分：0)
我放弃了使用.babelrc文件，而在我的package.json中，我执行了以下操作：
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
......
},
"babel": {
"presets": [
"react",
"es2015",
"stage-0"
],
"env": {
"development": {
"plugins": [
[
"transform-async-to-generator"
],
[
"transform-object-rest-spread"
],
[
"transform-react-display-name"
],
[
"react-transform",
{
"transforms": [
{
"transform": "react-transform-hmr",
"imports": [
"react"
],
"locals": [
"module"
]
},
{
"transform": "react-transform-catch-errors",
"imports": [
"react",
"redbox-react"
]
}
]
}
]
]
},
"production": {
"plugins": [
[
"transform-async-to-generator"
],
[
"transform-object-rest-spread"
],
[
"transform-react-display-name"
]
]
}
}
},