如何使用babel

Question

我正在用node编写mt first cli应用程序，并且使用babel来转换我的代码时遇到了一些问题。 基本上，应用程序应启动一个执行ssr响应的快速服务器（类似于下一个）。 在此过程中的某个地方，我使用jsx语法来呈现react组件，因此我需要使用babel来转换我的代码。 我对如何使用babel cli或webpack做到这一点很熟悉， 但是，我仍然面临在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;
}

我调用的renderer内部server.js文件是：

        const content = renderToString(
        <Provider store={store}>
            <StaticRouter location={req.url} context={routerContext} basename= {opts.baseName || ''}>
                <div>{renderRoutes(Routes)}</div>
            </StaticRouter>
        </Provider>
    );

这是我收到语法错误的地方... 我还尝试使用webpack和babel预编译我的server.js文件 然后将bin命令链接到bundle.js输出，但是没有用 我在屏幕上弹出此错误：

在cli app中使用babel的正确方法是什么？

Answer 1

我在这里遵循了几个步骤，您可以通过以下步骤找到https://babeljs.io/setup，然后单击“ CLI”。按照这些步骤，我可以将您的server.js JSX转换，再在一个新的新文件夹中添加几个。为了转译您的代码，这是我所做的：

1. 通过运行（使用所有默认值）创建package.json

   npm初始化

2. 使用上面的小<Provider>摘录创建的src \ server.js文件

3. 运行以下命令以安装babel和react库：

   npm install --save-dev @ babel / core @ babel / cli

   npm install --save-dev @ babel / preset-env

   npm install --save-dev @ babel / preset-react

4. 使用以下这一行创建了一个.babelrc文件：

   {“预设”：[“ @ babel / preset-env”，“ @ babel / preset-react”]}

5. 在package.json中创建了构建脚本

   脚本：{“ build”：“ babel src -d lib”}

6. 运行该版本：

   npm运行脚本构建

它成功运行并将js转换为lib文件夹中的新文件。在一个全新的文件夹中尝试一下，让我知道如何为您工作