Я пишу mt first cli приложение с узлом, и у меня возникают проблемы с использованием babel для переноса моего кода.По сути, приложение должно запустить экспресс-сервер, который выполняет ssr для реакции (аналогично тому, что происходит дальше).Где-то в процессе я использую синтаксис jsx для рендеринга реагирующего компонента, поэтому мне нужно перенести мой код с помощью babel.Я знаком с тем, как сделать это с помощью babel cli или с веб-пакетом, однако, я все еще сталкиваюсь с проблемами при его реализации для приложения cli.
В моем файле package.json у меня есть:
"bin": {
"ssr": "./cli/ssr.js"
},
и мой файл ssr.js:
#!/usr/bin/env node
const server = require('../server');
const routes = require('../../routes.js');
const createStore = require('redux').createStore;
const port = process.env.PORT || 3000;
const args = process.argv;
const defReducer = function(state={}, action){
return state;
}
const configureStore = createStore(defReducer);
const instance = server(routes, configureStore, {}, {});
instance.listen(port, ()=>{
console.log(`ssr server runs on localhost://${port}`);
});
, а мой файл server.js - просто обычный экспресс-сервер:
const express = require('express');
const cors = require('cors');
const renderer = require('./renderer');
module.exports = (Routes, createStore=()=>null, renderOpts={}, routerContext={})=>{
const app = express();
app.use(express.static('public'));
app.use(cors());
const port = process.env.PORT || 3000;
app.get('*.js', (req, res, next) => {
req.url = req.url + '.gz';
res.set('Content-Encoding', 'gzip');
next();
});
app.all('*', (req, res) => {
const store = createStore();
const promises = matchRoutes(Routes, req.path).map(( { route } ) => {
if (typeof route.path === 'undefined') { return null; }
let ctx = {store, module:route.module, req, res}
return route.loadData ? route.loadData(ctx) : null;
});
Promise.all(promises).then(() => {
const content = renderer(Routes, req, store, renderOpts, routerContext);
if (context.url) {
return res.redirect(301, context.url);
}
if (context.notFound) {
res.status(404);
}
res.send(content);
});
});
return app;
}
внутри файла server.js, который я вызываю renderer которое делает:
const content = renderToString(
<Provider store={store}>
<StaticRouter location={req.url} context={routerContext} basename= {opts.baseName || ''}>
<div>{renderRoutes(Routes)}</div>
</StaticRouter>
</Provider>
);
и здесь я получаю синтаксические ошибки ... Я также попытался предварительно скомпилировать файл server.js, используя webpack и babel, а затем связать команду bin с bundle.jsвывод, но это не сработало. Я получаю эту ошибку, появляющуюся на экране:
Как правильно использовать babel с приложением cli?