52869


以下のjsをwebpackでバンドルしたいのですが、出力されたjsを呼び出してみるとエラーが返ってきます。バンドル自体は成功しているように見えます。

[code]

    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);
      });
    };
    
[/code]

webpack.config.jsは以下の設定になっています。

[code]

    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'
    };
    
[/code]

出力された`main.js`を呼び出すjsファイルを用意して実行すると、以下のエラーオブジェクトが返ってきます。

[code]

    { 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' }
    
[/code]

どうやら`@babel/preset-
env`が見つからないということみたいですが、ちゃんと`node_modules`に存在しています。バンドルした際に`@babel/preset-
env`がついてきていないのかと考えてincludeで設定しましたが結果は変わらず。

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


CC BY-SA 4.0
2019-02-19T03:58:38.420
52868
2019-02-19T04:46:16.650
31396
question
javascript webpack
babelを内部で使用したjsをwebpackでバンドルできない


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

* * *

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

[code]

    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
    
[/code]

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

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

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


CC BY-SA 4.0
2019-02-19T04:46:16.650
52869
2019-02-19T04:46:16.650
30079
52868
answer