私のプロジェクトには、次のような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
262
module.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
ですか?