1
Во-первых, я очень новичок в этом мире Node.js, поэтому, пожалуйста, несите меня за мою нубость. В настоящее время я загрязняю руки в Node.js + Express + React + Webpack stack. Мне удалось запустить некоторый код в разработке, но не смог запустить его на производство. Я получил следующую ошибку, когда пытаюсь запустить узел server.js на терминале.Node.js - Выполнение команды узла на сервере Server.js (Express + React + Webpack)
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
Однако в моей локальной машине (среда разработки), я могу запустить это нормально с НПМ начать.
Nicholass-MacBook-Pro:sevva-backend nicholaslie$ npm start
> [email protected] start /Users/nicholaslie/Documents/Sevva/sevva-backend
> if-env NODE_ENV=production && npm run start:prod || npm run start:dev
> [email protected] 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, мои загрузки страницы следующим образом.
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 не работают с узлом .
Итак, что я сделал, я попытался использовать 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 также работает не так, как ожидалось, так как он не удается преобразовать файлы 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>
)
}
}
Как примечание стороны, я понимаю, что столпотворение-узел не должен быть использован для производства. Как сказано в docs:
Не предназначен для использования в производстве Вы не должны использовать Бабель-узел в производстве. Без необходимости тяжелый, с высоким использованием памяти из-за того, что кеш хранится в памяти. Вы также всегда будете испытывать штраф за запуск, так как все приложение должно быть скомпилировано на лету.
Мой 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()
]
};
Моя цель: развернуть это приложение в производстве. Какая правильная команда запускать мое приложение на сервере и какие необходимые необходимые изменения?Надеюсь, кто-то может помочь :(
Приветствия за отправку как можно больше информации. Проблема здесь в том, что вам нужно использовать babel для компиляции ваших внутренних модулей для использования commonjs. Предполагая, что вы используете node6, он будет поддерживать классы и т. Д., Но пока не поддерживает модули. Webpack заставляет его работать, потому что он обрабатывает компиляцию для вас с загрузчиком babel. Я не отвечаю как ответ, так как я действительно не знаю лучшего решения для него на сервере nodejs. Что-то мне все еще нужно учиться. – agmcleod
@agmcleod, да, сначала я думал, что сам Node.js нуждается в обновлении, поэтому я попробовал обновление. Но нет, это не работает. Лол. –
Вы пытаетесь создать приложение изоморфного реагирования? – Everettss