如何使用 babel 转译节点 cli 应用程序

Question

我正在使用 node 编写 mt first cli 应用程序，并且我在使用 babel 转译我的代码时遇到了一些问题。 基本上，该应用程序应该启动一个快速服务器，该服务器执行 ssr 以进行反应（类似于 next 所做的）。 在这个过程中的某个地方，我使用 jsx 语法来渲染反应组件，所以我需要用 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;
}

在 server.js 文件中，我调用了 renderer：

        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 文件夹中的一个新文件。在一个全新的文件夹中尝试一下，让我知道如何为你工作