Fatal编程技术网
  • javascript/
  • Javascript Node.js-在Server.js上执行Node命令（Express+；React+；Webpack）

Javascript Node.js-在Server.js上执行Node命令（Express+；React+；Webpack）

javascript node.js express reactjs webpack

Javascript Node.js-在Server.js上执行Node命令（Express+；React+；Webpack）,javascript,node.js,express,reactjs,webpack,Javascript,Node.js,Express,Reactjs,Webpack,首先，我对Node.js这个世界非常陌生，所以请容忍我的无趣。我目前在Node.js+Express+React+Webpack堆栈上弄得手忙脚乱。我设法在开发中运行了一些代码，但无法在生产中运行。当我尝试在终端上运行节点服务器.js时，出现以下错误 Nicholass-MacBook-Pro:sevva-backend nicholaslie$ node server.js /Users/nicholaslie/Documents/Sevva/sevva-backend/server.js:7

首先，我对Node.js这个世界非常陌生，所以请容忍我的无趣。我目前在Node.js+Express+React+Webpack堆栈上弄得手忙脚乱。我设法在开发中运行了一些代码，但无法在生产中运行。当我尝试在终端上运行节点服务器.js时，出现以下错误

Nicholass-MacBook-Pro:sevva-backend nicholaslie$ node server.js
/Users/nicholaslie/Documents/Sevva/sevva-backend/server.js:7
import React from 'react'
^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:545:28)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.runMain (module.js:607:10)
    at run (bootstrap_node.js:382:7)
    at startup (bootstrap_node.js:137:9)
    at bootstrap_node.js:497:3
但是，在我的本地机器（开发环境）中，我可以使用npm start运行这个程序

Nicholass-MacBook-Pro:sevva-backend nicholaslie$ npm start

> sevva-backend@0.0.1 start /Users/nicholaslie/Documents/Sevva/sevva-backend
> if-env NODE_ENV=production && npm run start:prod || npm run start:dev


> sevva-backend@0.0.1 start:dev /Users/nicholaslie/Documents/Sevva/sevva-backend
> webpack-dev-server --progress --profile --colors --inline --content-base public --history-api-fallback

 70% 1/1 build modules http://127.0.0.1:3000/
webpack result is served from /
content is served from /Users/nicholaslie/Documents/Sevva/sevva-backend/public
404s will fallback to /index.html
3076ms build modules      
8ms seal 
6ms optimize 
10ms hashing
30ms create chunk assets
23ms additional chunk assets
57ms optimize chunk assets
77ms optimize assets
20ms emit
当我转到时，我的页面加载如下

package.json：

{
  "name": "sevva-backend",
  "version": "0.0.1",
  "private": true,
  "main": "server.js",
  "scripts": {
    "build": "if-env NODE_ENV=production build:prod || build:dev",
    "build:prod": "babel -d ./src ./public/bundle.js -s && webpack --config webpack.production.config.js",
    "build:dev": "webpack",
    "lint": "eslint src",
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:dev": "webpack-dev-server --progress --profile --colors --inline --content-base public --history-api-fallback",
    "start:prod": "webpack --config webpack.production.config.js && node server.js",
    "test": "NODE_ENV=test mocha --recursive test",
    "test:coverage": "nyc npm test",
    "test:unit": "mocha --recursive test/middleware test/models test/routes",
    "test:integration": "mocha --recursive test/integration"
  },
  "dependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.18.0",
    "babel-core": "^6.18.2",
    "babel-eslint": "^7.1.0",
    "babel-loader": "^6.2.7",
    "babel-plugin-css-modules-transform": "^1.1.0",
    "babel-plugin-transform-class-properties": "^6.18.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-register": "^6.18.0",
    "babel-runtime": "^6.18.0",
    "body-parser": "^1.13.3",
    "compression": "^1.6.2",
    "cookie-parser": "^1.3.3",
    "css-loader": "^0.25.0",
    "eslint": "^3.9.1",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "firebase": "^3.5.3",
    "glob": "^6.0.4",
    "html-webpack-plugin": "^2.24.1",
    "if-env": "^1.0.0",
    "ignore-styles": "^5.0.1",
    "jade": "^1.11.0",
    "method-override": "^2.3.0",
    "morgan": "^1.6.1",
    "node-sass": "^3.11.2",
    "path": "^0.12.7",
    "postcss-loader": "^1.1.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-router": "^3.0.0",
    "react-tools": "^0.13.3",
    "react-transform": "0.0.3",
    "sass-loader": "^4.0.2",
    "serve-favicon": "^2.3.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.3",
    "webpack-cleanup-plugin": "^0.4.1",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-dev-server": "^1.16.2",
    "webpack-hot-middleware": "^2.13.1"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-eslint": "^7.1.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "chai": "^3.5.0",
    "debug": "^2.2.0",
    "eslint": "^3.9.1",
    "eslint-plugin-react": "^6.6.0",
    "mocha": "^3.0.2",
    "nyc": "^8.1.0",
    "request": "^2.60.0",
    "supertest": "^2.0.0",
    "time-grunt": "^1.2.1"
  },
  "engines": {
    "node": "6.6.0"
  }
}
请注意上面许多不必要的依赖关系。我很好奇为什么webpack dev server可以完美地工作，但不能与node server.js一起工作，如上面的文件所示

现在我已经挠头好几个小时了，试图弄明白这个问题。首先，我非常清楚ES6import语句似乎不适用于node命令

因此，我所做的是尝试使用巴别塔节点。然而，我也不能让它像我期望的那样工作，它返回以下错误

Nicholass-MacBook-Pro:sevva-backend nicholaslie$ babel-node server.js
/Users/nicholaslie/Documents/Sevva/sevva-backend/node_modules/bootstrap/dist/css/bootstrap.min.css:6
 *//*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}im
SyntaxError: Unexpected token {
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:545:28)
    at Module._extensions..js (module.js:582:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/nicholaslie/.nvm/versions/node/v7.0.0/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/nicholaslie/Documents/Sevva/sevva-backend/src/app.jsx:1:1)
我的webpack.production.config.js文件：

"use strict";
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');

const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "3000";

module.exports = {
    entry: [
        'react-hot-loader/patch',
        './src/index.jsx' // your app's entry point
    ],
    externals: {React: 'react'},
    devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map',
    output: {
        path: 'public',
        filename: 'bundle.js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [{
            // global css
            test: /\.css$/,
            exclude: /[\/\\]src[\/\\]/,
            loaders: [
                'style?sourceMap',
                'css'
            ]
        }, {
            // local scss modules
            test: /\.scss$/,
            exclude: /[\/\\](node_modules|bower_components|public)[\/\\]/,
            loaders: [
                'style?sourceMap',
                'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
                'postcss',
                'sass'
            ]
        }, {
            // local css modules
            test: /\.css$/,
            exclude: /[\/\\](node_modules|bower_components|public)[\/\\]/,
            loaders: [
                'style?sourceMap',
                'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
            ]
        }, {
            //JS/JSX files
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loaders: ['react-hot-loader/webpack', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react,plugins[]=transform-runtime']
        }]
    },
    sassLoader: {
        includePaths: [path.resolve(__dirname, "./some-folder")]
    },
    devServer: {
        contentBase: "./public",
        // do not print bundle build stats
        noInfo: true,
        // enable HMR
        hot: true,
        // embed the webpack-dev-server runtime into the bundle
        inline: true,
        // serve index.html in place of 404 responses to allow HTML5 history
        historyApiFallback: true,
        port: PORT,
        host: HOST
    },
    plugins: process.env.NODE_ENV === 'production' ? [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ] : [
            new webpack.NoErrorsPlugin(),
            new webpack.HotModuleReplacementPlugin(),
            new HtmlWebpackPlugin({
                template: './src/index.html'
            }),
        ]
};

var fs = require('fs')
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var WebpackCleanupPlugin = require('webpack-cleanup-plugin');

module.exports = {
    entry: [
        './src/index.jsx'
    ],
    // keep node_module paths out of the bundle
    externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).concat([
        'react-dom/server', 'react/addons',
    ]).reduce(function (ext, mod) {
        ext[mod] = 'commonjs ' + mod
        return ext
    }, { React: 'react' }),
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [{
            //local css modules
            test: /[\/\\]src[\/\\].*\.css/,
            exclude: /(node_modules|bower_components|public)/,
            loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
        }, {
            //local scss modules
            test: /[\/\\]src[\/\\].*\.scss/,
            exclude: /(node_modules|bower_components|public)/,
            loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')
        }, {
            //global css files
            test: /[\/\\](node_modules|global)[\/\\].*\.css$/,
            loader: ExtractTextPlugin.extract('style', 'css')
        }, {
            //JS/JSX files
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loaders: ['react-hot-loader/webpack', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react,plugins[]=transform-runtime']
        }]
    },
    node: {
        __filename: true,
        __dirname: true
    },
    plugins: [
        new WebpackCleanupPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                screw_ie8: true,
                drop_console: true,
                drop_debugger: true
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new ExtractTextPlugin('[contenthash].css', {
            allChunks: true
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            title: 'Webpack App'
        }),
        new webpack.optimize.DedupePlugin()
    ]
};
我的目标：在生产中部署此应用程序。在服务器上运行我的应用程序的正确命令是什么？需要做哪些必要的更改？希望有人能帮忙：（

1.如果你想创建同构的react应用程序

由于您使用的是
JSX
、
.css
加载器和其他奇特的weback工具，因此您也必须使用webpack捆绑服务器端代码。有关更多信息，请参阅本文

2.如果您只想在客户端做出反应

只需通过函数删除服务器端呈现静态html的代码
renderToString
，并仅在客户端保留用于引导的元素挂钩。

1。如果要创建同构的react应用程序

由于您使用的是
JSX
、
.css
加载器和其他奇特的weback工具，因此您也必须使用webpack捆绑服务器端代码。有关更多信息，请参阅本文

2.如果您只想在客户端做出反应

只需通过函数
renderToString
删除用于在服务器端呈现静态html的代码，并且只在客户端留下用于引导的元素挂钩。

为发布尽可能多的信息而干杯：）。这里的问题是，您需要使用babel来编译后端模块以使用commonjs。假设您使用的是node6，它将支持类等，但还不支持模块。Webpack使它能够工作，因为它使用babel loader为您处理编译。我不回答作为一个答案，因为我真的不知道最好的解决方案，它对nodejs后端。有些东西我还需要自己学习。@agmcleod，是的，起初我认为Node.js本身需要更新，所以我尝试了更新。但是不，那不行。哈哈。你想创建同构的react应用程序吗？@Everettss，我不太清楚这个词（同构的react应用程序），但我想做的就是准备一个以Express为后端的web应用程序，然后在前端进行react（现在）。我想Webpack将帮助我优化资产，压缩js文件，并将其作为捆绑包（CMIIW）交付。现在，这就是我当前的目标：）看起来你们正在服务器上运行函数
renderToString
，所以它是一个同构的应用程序。只需向我们展示您的
server.js
。为您发布了这么多信息而干杯：）。这里的问题是，您需要使用babel来编译后端模块以使用commonjs。假设您使用的是node6，它将支持类等，但还不支持模块。Webpack使它能够工作，因为它使用babel loader为您处理编译。我不回答作为一个答案，因为我真的不知道最好的解决方案，它对nodejs后端。有些东西我还需要自己学习。@agmcleod，是的，起初我认为Node.js本身需要更新，所以我尝试了更新。但是不，那不行。哈哈。你想创建同构的react应用程序吗？@Everettss，我不太清楚这个词（同构的react应用程序），但我想做的就是准备一个以Express为后端的web应用程序，然后在前端进行react（现在）。我想Webpack将帮助我优化资产，压缩js文件，并将其作为捆绑包（CMIIW）交付。现在，这就是我当前的目标：）看起来你们正在服务器上运行函数
renderToString
，所以它是一个同构的应用程序。只需向我们展示您的
server.js
。 
var fs = require('fs')
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var WebpackCleanupPlugin = require('webpack-cleanup-plugin');

module.exports = {
    entry: [
        './src/index.jsx'
    ],
    // keep node_module paths out of the bundle
    externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).concat([
        'react-dom/server', 'react/addons',
    ]).reduce(function (ext, mod) {
        ext[mod] = 'commonjs ' + mod
        return ext
    }, { React: 'react' }),
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [{
            //local css modules
            test: /[\/\\]src[\/\\].*\.css/,
            exclude: /(node_modules|bower_components|public)/,
            loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
        }, {
            //local scss modules
            test: /[\/\\]src[\/\\].*\.scss/,
            exclude: /(node_modules|bower_components|public)/,
            loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')
        }, {
            //global css files
            test: /[\/\\](node_modules|global)[\/\\].*\.css$/,
            loader: ExtractTextPlugin.extract('style', 'css')
        }, {
            //JS/JSX files
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loaders: ['react-hot-loader/webpack', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react,plugins[]=transform-runtime']
        }]
    },
    node: {
        __filename: true,
        __dirname: true
    },
    plugins: [
        new WebpackCleanupPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                screw_ie8: true,
                drop_console: true,
                drop_debugger: true
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new ExtractTextPlugin('[contenthash].css', {
            allChunks: true
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            title: 'Webpack App'
        }),
        new webpack.optimize.DedupePlugin()
    ]
};