2

以下の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で設定しましたが結果は変わらず。

どうすればこのエラーは解消できるでしょうか?

1 件の回答 1

2

@babel/coreではなく@babel/standaloneを使用するのがよいと思います。


webpackでご提示のプログラムをバンドルすると以下のワーニングが出ます。これが今回の問題を示しています。

WARNING in ./node_modules/@babel/core/lib/config/files/configuration.js 232:23-40
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/@babel/core/lib/config/files/index.js
 @ ./node_modules/@babel/core/lib/index.js
 @ ./src/index.js

WARNING in ./node_modules/@babel/core/lib/config/files/plugins.js 170:11-24
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/@babel/core/lib/config/files/index.js
 @ ./node_modules/@babel/core/lib/index.js
 @ ./src/index.js

babelが@babel/preset-envを読み込もうとするのは、それを使う側でpresetsに@babel/preset-envを指定しているからです。つまり、@babel/core側ではどのファイルを読みこめば(requireすれば)いいかが予め決まっておらず、オプションを読んでから動的にrequire先を決定します。

このようなものはwebpackでうまく扱うことができず、それが上記のワーニングや今回のエラーの原因です。

最初にお勧めした@babel/standaloneは設定ファイルを廃してあらかじめ必要なプリセットを同梱してあるのでこの問題が発生しません。

3
  • 大変参考になる回答ありがとうございます! 早速試してみたのですが、@babel/preset-envは有効じゃないと言われたので調べてみると、standaloneはまだes2015stage-0などを使ってる様子..? とりあえずビルドは通ったので、出力したjsを呼び出したのですが何のエラーもなく何も起こらず終了。これはそもそものbabel.transform等の書き方が間違っているのでしょうか?
    – Futahei
    2019年2月19日 5:21
  • presetはes2015を使いました。
    – Futahei
    2019年2月19日 5:24
  • 1
    すいません。自己解決しました。 babel.transform()の第三引数にコールバックがあったのですが、standaloneでは返り値に結果が内包されており、result = babel.transform(code, option).code;の形で受け取れました。
    – Futahei
    2019年2月19日 5:48

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。