OS： Windows 10 Pro
网络包： 1.14.0
因此，当我启动服务器(npm start(时，以下代码：
async applyMiddleware(req, next) {
....
}由我的package.json "babel": "env":["transform-async-to-generator"]的development部分正确转换。但是当我构建我的应用程序(npm run build(时，"babel": "env":["transform-async-to-generator"]的production部分无法正确转换代码，并出现以下错误：
Module parse failed: C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesbabel-loaderlibindex.js!C:Usersd0475DocumentsProjectslearn-redux-graphqlclientapolloClient.js Unexpected token (77:25)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (77:25)
at Parser.pp$4.raise (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:2221:15)
at Parser.pp.unexpected (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:603:10)
at Parser.pp.expect (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:597:28)
at Parser.pp$3.parseObj (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1973:16)
at Parser.pp$3.parseExprAtom (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1805:19)
at Parser.pp$3.parseExprSubscripts (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1597:21)
at Parser.pp$3.parseExprList (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:2165:22)
at Parser.pp$3.parseExprAtom (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1801:28)
at Parser.pp$3.parseExprSubscripts (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1597:21)
at Parser.pp$3.parseExprList (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:2165:22)
at Parser.pp$3.parseSubscripts (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1597:21)
at Parser.pp$3.parseExpression (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:1573:21)
at Parser.pp$1.parseStatement (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:727:47)
at Parser.pp$1.parseTopLevel (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:638:25)
at Parser.parse (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:516:17)
at Object.parse (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_modulesacorndistacorn.js:3098:39)
at Parser.parse (C:Usersd0475DocumentsProjectslearn-redux-graphqlnode_moduleswebpacklibParser.js:902:15)
@ ./client/app.js 17:20-45这里有什么问题？
我package.json是：
{
"name": "learn-redux-graphql",
"version": "1.0.0",
"description": ":) ",
"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"
},
"repository": {
"type": "git",
"url": "https://github.com/TheoMer/learn-redux-graphql.git"
},
"author": "Theo Mer",
"license": "MIT",
"homepage": "https://github.com/TheoMer/learn-redux-graphql",
"dependencies": {
"apollo-client": "^1.0.2",
"babel-core": "^6.5.2",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.3",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-object-rest-spread": "^6.5.0",
"babel-plugin-transform-react-display-name": "^6.5.0",
"babel-polyfill": "^6.5.0",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"dotenv-webpack": "^1.4.5",
"eslint": "^3.4.0",
"eslint-plugin-babel": "^3.1.0",
"eslint-plugin-react": "^4.1.0",
"express": "^4.13.4",
"firebase": "^3.3.0",
"graphql-tag": "^1.3.2",
"graphql-tools": "^0.10.1",
"immutability-helper": "^2.1.2",
"localforage": "^1.5.0",
"lodash": "^4.17.4",
"node-env-file": "^0.1.8",
"raven-js": "^2.1.1",
"react": "^0.14.7",
"react-addons-css-transition-group": "^0.14.7",
"react-apollo": "^1.0.0-rc.3",
"react-dom": "^0.14.7",
"react-redux": "^4.4.0",
"react-router": "^2.0.0",
"react-router-redux": "^4.0.0",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.2",
"redbox-react": "^1.2.2",
"redux": "^3.3.1",
"redux-persist": "^4.8.0",
"redux-thunk": "^2.0.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.0",
"stylus": "^0.54.5",
"stylus-loader": "^2.3.1",
"subscriptions-transport-ws": "^0.5.5-alpha.0",
"webpack": "^1.12.14",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.7.1"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-react-jsx": "^6.23.0",
"copy-webpack-plugin": "^4.0.1",
"expect": "^1.14.0",
"expect-jsx": "^2.3.0",
"html-webpack-plugin": "^2.28.0",
"mocha": "^2.4.5",
"offline-plugin": "^4.7.0",
"react-addons-test-utils": "^0.14.7",
"sw-precache-webpack-plugin": "^0.9.1"
},
"babel": {
"presets": [
"react",
"es2015"
],
"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"
]
]
}
}
},
"eslintConfig": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [
2,
"single"
],
"strict": [
2,
"never"
],
"babel/generator-star-spacing": 1,
"babel/new-cap": 1,
"babel/object-shorthand": 1,
"babel/arrow-parens": 1,
"babel/no-await-in-loop": 1,
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"babel",
"react"
]
}
}我webpack.config.dev是：
var path = require('path');
var webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/app'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new Dotenv({
path: './.env', // Path to .env file (this is the default)
safe: true // load .env.example (defaults to "false" which does not use dotenv-safe)
})
],
module: {
loaders: [
// js
{
test: /.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};我webpack.config.prod是：
const path = require('path');
const webpack = require('webpack');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OfflinePlugin = require('offline-plugin');
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 webpack.optimize.OccurenceOrderPlugin(),
new Dotenv({
path: './.env', // Path to .env file (this is the default)
safe: true // load .env.example (defaults to "false" which does not use dotenv-safe)
}),
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' }, // Copies file from root to specified output:path:
{ 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: {
loaders: [
// js
{
test: /.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};您需要授予 Webpack 进程对NODE_ENV变量的访问权限。
窗户： "build:webpack": "set NODE_ENV=production&& webpack --config webpack.config.prod.js",
MacOS/Linux： "build:webpack": "export NODE_ENV=production && webpack --config webpack.config.prod.js",