【发布时间】：2023-03-11 01:30:01
【问题描述】：
尝试运行我的 express 服务器，但它无法理解“import”关键字。我以为我已经安装了所有 Babel 依赖项，但显然没有……
命令：node server.js
控制台：SyntaxError: Unexpected token import
.babelrc - 我还需要添加什么吗？
{
"presets": ["react", "es2015"]
}
package.json
...
"dependencies": {
"express": "^4.14.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-redux": "^4.4.5",
"redux": "^3.6.0"
},
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"webpack": "^1.13.3"
}
...
server.js
import path from 'path'
import Express from 'express'
import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import counterApp from './reducers'
import App from './containers/App'
const app = Express()
const port = 3000
// This is fired every time the server side receives a request
app.use(handleRender)
import { renderToString } from 'react-dom/server'
function handleRender(req, res) {
// Create a new Redux store instance
const store = createStore(counterApp)
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<App />
</Provider>
)
// Grab the initial state from our Redux store
const preloadedState = store.getState()
// Send the rendered page back to the client
res.send(renderFullPage(html, preloadedState))
}
function renderFullPage(html, preloadedState) {
return `
<!doctype html>
<html>
<head>
<title>Redux Universal Example</title>
</head>
<body>
<div id="root">${html}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
</script>
<script src="/static/bundle.js"></script>
</body>
</html>
`
}
app.listen(port)
更新
现在已完成以下操作：
命令：npm install babel-plugin-transform-es2015-modules-commonjs
.babelrc
{
"presets": ["react", "es2015"],
"plugins": ["transform-es2015-modules-commonjs"]
}
命令：babel server.js --out-file server-compiled.js
命令：node server-compiled.js
--> server.js 的编译似乎成功了。我仍然收到相同的错误消息，但这次是文件./containers/App.ks，它还包含一个 ES6 模块语句。
我已经在我的 webpack.config.js 文件中包含了所有 babel 插件和预设，所以我会假设我的捆绑包处理了所有其他文件？
server-compiled.js
'use strict';
var path = require('path');
var Express = require('express');
var React = require('react');
var redux = require('redux').createStore;
var Provider = require('react-redux').Provider;
var counterApp = require('./reducers');
var App = require('./containers/App');
var app = Express();
var port = 3000;
// This is fired every time the server side receives a request
app.use(handleRender);
var renderToString = require('react-dom/server').renderToString;
function handleRender(req, res) {
// Create a new Redux store instance
var store = createStore(counterApp);
// Render the component to a string
var html = renderToString('\n <Provider store={store}>\n <App />\n </Provider>\n ');
// Grab the initial state from our Redux store
var preloadedState = store.getState();
// Send the rendered page back to the client
res.send(renderFullPage(html, preloadedState));
}
function renderFullPage(html, preloadedState) {
return ' <!doctype html>\n <html>\n <head>\n <title>Redux Universal Example</title>\n </head>\n <body>\n <div id="root">' + html + '</div>\n <script>\n window.__PRELOADED_STATE__ = ' + JSON.stringify(preloadedState) + '\n </script>\n <script src="/static/bundle.js"></script>\n </body>\n </html>\n ';
}
app.listen(port);
webpack.config.js
module.exports = {
entry: "./client.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a valid name to reference
query: {
presets: ['es2015', 'react'],
plugins: ['transform-es2015-modules-commonjs']
}
}
]
client.js（入口文件）
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'
import counterApp from './reducers'
// Grab the state from a global injected into server-generated HTML
const preloadedState = window.__PRELOADED_STATE__
// Create Redux store with initial state
const store = createStore(counterApp, preloadedState)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
containers/App.js - 此文件仍会在控制台中显示错误
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>App Component Here</div>
)
}
}
【问题讨论】：
-
es6 模块不是 es6 的一部分 babeljs.io/docs/plugins/transform-es2015-modules-commonjs
-
那你是说只能使用
const express = require('express')，例如？ -
你可以简单地将“transform-es2015-modules-commonjs”添加到你的.babelrc。不包含的原因是因为 es6 的模块是 es6 定义的，但是它们的实现还在等待中。
-
请看更新...
标签： node.js express import ecmascript-6 babeljs