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

时间：2016-11-08 15:14:13

标签： javascript node.js express reactjs webpack

首先，我对这个Node.js世界很陌生，所以请耐心等待我的noobishness。我目前在Node.js + Express + React + Webpack堆栈上弄脏了。我设法在开发中运行一些代码，但无法在生产中运行。当我尝试在终端上运行 node server.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

当我转到http://localhost:3000时，我的页面加载如下。

local development

的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 ，如上面的文件中所示。

现在，我一直在试图理解这个问题几个小时。首先，我非常清楚ES6 import 语句似乎不适用于 node 命令。

所以，我做的是尝试使用 babel-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)

不知何故，babel-node也没有按预期工作，因为它在转换CSS文件时失败了。我的app.jsx文件如下：

import 'bootstrap/dist/css/bootstrap.min.css'
import styles from './stylesheets/index.scss'
import navlinkStyles from './stylesheets/components/_navlink.scss'
import React from 'react'
import { IndexLink } from 'react-router'
import NavLink from './components/NavLink'
import Home from './components/Home'

export default class App extends React.Component {
  render() {
    return (
      <div>
        {this.props.children || <Home />}
        <h1>It Works!</h1>
        <p>This React project just works including <span className={styles.blueBg}>module</span> local styles.</p>
        <p>Global bootstrap css import works too as you can see on the following button.</p>
        <p><a className="btn btn-primary btn-lg">Enjoy!</a></p>
        <ul role="nav">
          <li><IndexLink to="/" activeClassName={navlinkStyles.navlinkActive}>Home</IndexLink></li>
          <li><NavLink to="/about">About</NavLink></li>
          <li><NavLink to="/repos">Repos</NavLink></li>
        </ul>

        {/* add this */}
        {this.props.children}
      </div>
    )
  }
}

作为旁注，我知道babel节点不应该用于生产。正如docs中所述：

  

不适合生产使用   你不应该在生产中使用babel-node。这是不必要的   由于缓存存储在内存中，因此内存使用率很高。   您也将始终遇到启动性能损失   整个应用程序需要动态编译。

我的webpack.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'
            }),
        ]
};

我的webpack.production.config.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()
    ]
};

我的目标：在生产中部署此应用。在服务器上运行我的应用程序的正确命令是什么，以及需要进行哪些必要的更改？希望有人可以提供帮助:(

1 个答案:

答案 0 :(得分：0)

<强> 1。如果你想创建同构反应应用

由于您使用JSX，.css加载程序和其他花哨的weback东西，您必须使用webpack捆绑服务器端代码。有关详细信息，请查看此帖Webpack for back-end?

<强> 2。如果您只想在客户端做出反应

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

相关问题
最新问题