babelを内部で使用したjsをwebpackでバンドルできない
以下のjsをwebpackでバンドルしたいのですが、出力されたjsを呼び出してみるとエラーが返ってきます。バンドル自体は成功しているように見えます。
const babel = require('@babel/core');
const _global = global || window;
_global.transform = function(code, cb) {
babel.transform(code, {
minified: true,
presets: ['@babel/preset-env'],
}, (err, result) => {
if (err)cb(err, null);
else cb(null, result.code);
});
};
webpack.config.jsは以下の設定になっています。
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'production',
output: {
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, "node_modules/@babel/core"),
path.resolve(__dirname, "node_modules/@babel/preset-env")
],
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
target: 'node'
};
出力されたmain.js
を呼び出すjsファイルを用意して実行すると、以下のエラーオブジェクトが返ってきます。
{ Error: Cannot find module '/Users/〇〇/Projects/webpack-demo/node_modules/@babel/preset-env/lib/index.js'
at n (/Users/〇〇/Projects/webpack-demo/dist/main.js:42:100955)
at b (/Users/〇〇/Projects/webpack-demo/dist/main.js:1750:55188)
at t.loadPreset (/Users/〇〇/Projects/webpack-demo/dist/main.js:1750:53373)
at m (/Users/〇〇/Projects/webpack-demo/dist/main.js:42:104613)
at /Users/〇〇/Projects/webpack-demo/dist/main.js:42:103548
at Array.map (<anonymous>)
at R (/Users/〇〇/Projects/webpack-demo/dist/main.js:42:103523)
at g (/Users/〇〇/Projects/webpack-demo/dist/main.js:42:103430)
at /Users/〇〇/Projects/webpack-demo/dist/main.js:42:102661
at /Users/〇〇/Projects/webpack-demo/dist/main.js:1:122682 code: 'MODULE_NOT_FOUND' }
どうやら@babel/preset-env
が見つからないということみたいですが、ちゃんとnode_modules
に存在しています。バンドルした際に@babel/preset-env
がついてきていないのかと考えてincludeで設定しましたが結果は変わらず。
どうすればこのエラーは解消できるでしょうか?