0

私のプロジェクトには、次のようなCJSrequireと ES構文の両方を使用するファイルがあります。import

const multer = require('multer');
import multerS3 from './multer-s3-storage-engine.js';
const ExpressRouter = require('express').Router();
....
....
module.exports = ExpressRouter;

これらを混ぜ合わせるべきではないことはわかっていbabelますが、すべてをトランスパイルして機能させるには、それが必要だと思いました。

開発では、次のようにバージョンbabel-nodeを開始するために使用します。dev

"dev": "babel-node -r dotenv/config src/server.js"

上記は正常に機能し、CJS と ES の混合ファイルはすべて機能します。ただし、本番ビルドに関しては、Webpack が失敗し、次のエラーがスローされます。

throw new Error('ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ' + module.id);


Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: 262

262module.exports = ExpressRouter;上記の私のコードの部分を参照しています。

Webpack 5ビルドの構成ファイルは次のようになります。

const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals');
const utils = require('./utils');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
    entry: {
        server: utils.resolve('/src/server.js')
    },
    target: 'node',
    // This tells the server bundle to use Node-style exports
    output: {
        path: utils.resolve('/dist'),
        filename: '[name].js',
        sourceMapFilename: isProduction ? '[name].[hash].js.map' : '[name].js.map',
        libraryTarget: 'commonjs2'
    },
    node: {
        // Need this when working with express, otherwise the build fails
        __dirname: false,  
        __filename: false, 
    },
    externals: nodeExternals({
        allowlist: [
            /^vue-meta*/,
            /\.(css|sass|scss|vue|html)$/,

        ]
    }),
    optimization: {
        minimize: isProduction ? true : false,
        minimizer:[
            (compiler) => ({
                terserOptions: {
                    compress: {drop_console: isProduction ? true : false},
                    format: {
                        comments: isProduction ? false : true
                    },
                }
            })
        ]
    },
    module: {
        rules: [
            {
                // Transpiles ES6-8 into ES5
                test: /\.m?jsx?$/,
                exclude: ['/node_modules/', /\bcore-js\b/, /\bwebpack\/buildin\b/, /@babel\/runtime-corejs3/],
                use: {
                    loader: 'babel-loader',
                    options: {
                        babelrc: false,
                        sourceType: "unambiguous",
                        presets: [
                            ["@babel/preset-env", {
                
                                modules: false,

                                corejs: {
                                    version: "3.9.0",
                                    proposals: true
                                },
                            }
                            ]
                        ],
                    }
                }
            },
        ]
    }
};

package.jsonの設定もあります。

 "babel": {
    "presets": [
      "@babel/preset-env"
    ],
    "sourceType": "unambiguous"
  }

babel-nodeで動作し、動作しない理由は何babel-loaderですか?

4

0 に答える 0