antd的babel-plugin-import插件，服务端渲染时，如果babel中配置了import会报错，删掉正常启动

Question

使用express服务端渲染，如果babel中配置了import会报错，删掉就可以正常启动。
但是这个配置，用webpack，不管是devServer，还是编译文件，都正常。只有在尝试用express启动的时候会包错

就是在.babelrc文件中的plugins的这段代码：

[
    "import",
    {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
    }
]

(function (exports, require, module, __filename, __dirname) { import '../../style/index.less';
                                                                     ^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected string
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
...

我的相关配置文件:
.babel

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime",
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": true
            }
        ]
    ]
}

server.js

require('ignore-styles');
var fs = require('fs');
var babelConfig = JSON.parse(fs.readFileSync('./.babelrc'));
require('@babel/register')(babelConfig);

require('./express.js');

express.js

import path from 'path';
import fs from 'fs';
import express from 'express';
import React from 'react';
import {renderToString} from 'react-dom/server';
import {StaticRouter} from 'react-router-dom';
import Home from './src/component/Home';
const ROOT_PATH = path.resolve(__dirname);
const BUILD_PATH = path.resolve(ROOT_PATH, 'build');
const app = express();

app.use(express.static(BUILD_PATH));
app.use('*', function (req, res) {
    let context = {};
    const template = renderToString(
        <StaticRouter location={req.url} context={context}>
            <Home/>
        </StaticRouter>
    );
    if(context.status === 404) {
        res.status(404);
    }
    fs.readFile(path.resolve(BUILD_PATH + '/index.html'), 'utf8', (err, data) => {
        if (err) {
            console.error(err);
            return res.status(500).send('An error occurred');
        }
        return res.send(
            data.replace('<div id="root"></div>', `<div id="root">${template}</div>`)
        )
    });
});

const server = app.listen(3000, () => {
    const host = server.address().address;
    const port = server.address().port;
    console.log('server is start at', host, port);
});

启动 node ./server.js

Answer 1

我是直接在webpack.config里配的。

{
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                babelrc: true,
                                cacheDirectory: true,
                                plugins: [["import", {
                                    "libraryName": "antd-mobile",
                                    "libraryDirectory": "es",
                                    "style": "css",
                                }]],

                            }
                        },
                        {
                            loader: 'eslint-loader',
                            options: {
                                eslintrc: true
                            }
                        },
                    ],
                }

Answer 2

删除.babelrc文件，新建babel.config.js文件在根目录
babel.config.js：

function isBabelRegister(caller) {
    return !!(caller && caller.name === "@babel/register");
}

module.exports = function (api) {
    const presets = ["@babel/preset-env", "@babel/preset-react"];
    const plugins = [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ];

    if(!api.caller(isBabelRegister)) {
        plugins.push(
            [
                "import",
                {
                    "libraryName": "antd",
                    "libraryDirectory": "es",
                    "style": true
                }
            ]
        );
    }

    api.cache(true);

    return {
        presets,
        plugins
    };
};

服务端入口文件:

require('ignore-styles');
require('@babel/register')();
require('./express.js');

主要依靠babel.config.js中的isBabelRegister方法判断是否是服务端渲染