About the use of the babel-core compilation plug-in, I would like to know why the compiled code here compiles index-browser.js into it.

as mentioned, I want to use the babel-core plug-in to implement a simple demo, code that compiles es6 code as follows:

src/main.js

var babel = require("@babel/core");
let code = `
    let a = 1;
    let b = 2
    let add = (a, b) => {
        return a + b
    } 
    var list = [1, 2, 3, 4, 5];
    for (item of list) {
        add(item, a)
    }
`
var babelOptions = {
    "presets": ["env"]
}
let result = babel.transform(code, babelOptions, function(err, result) {
    console.log("tranform result:", result, err)
});
console.log(result)

this main.js will be packaged and compiled by webpack. The configuration of webpack is as follows:
webpack.config.js

var HtmlWebpackPlugin = require("html-webpack-plugin")
var VueLoaderPlugin = require("vue-loader/lib/plugin");

var path = require("path")
var HtmlWebpackPlugin = require("html-webpack-plugin")

var rootPath = path.resolve(__dirname, "./")
module.exports = {
    entry: {
        main: "./src/main.js"
    },
    output: {
        path: rootPath + "/dist/",
        filename: "[name].js?[chunkhash]"
    },
    resolve: {
        extensions: [".js", ".json", ".less", ".ejs"],
        alias: {
            "@bootstrap": path.resolve(rootPath, "./node_modules/bootstrap/dist"),
        }
    },
    node: {
        fs: "empty"
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: "main.html",
            template: "./template/index.html",
            inject: "body",
            hash: false,
            minify: {
                removeComments: true,
                collapseWhitespace: false
            },
            chunksSortMode: "dependency"
        })
    ],
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: "babel-loader"
            }
        },
        {
            test: /\.vue$/,
            use: ["vue-loader"]
        },
        {
            test: /\.ejs$/,
            use: "ejs-loader"
        },
        {
            test: /\.css$/,
            use: ["style-loader", {loader: "css-loader", options: {minimize: true}}, "postcss-loader"]
        },
        {
            test: /\.less$/,
            use: ["style-loader", {loader: "css-loader", options: {minimize: true}}, "postcss-loader", "less-loader"]
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: "url-loader?limit=500000"
        },
        {
            test: /\.(ttf|svg|eot|woff|woff2)$/,
            use: ["file-loader"]
        }
        ]
    }
}

everything went well in the packaging process, but when the script was put into the browser to run, you received an error message:

Error: Cannot load preset @ babel/preset-env relative to / in a browser

after thorough investigation, it is found that the error message was thrown by this method:
@ babel/core/config/files/index-browser.js

function loadPreset(name, dirname) {
  throw new Error(`Cannot load preset ${name} relative to ${dirname} in a browser`);
}

the function call stack at this time is:

loadPreset (@ babel/core/config/files/index-browser.js) / / throw an exception
createDescriptor (@ babel/core/lib/config/config-descriptors.js)

but the problem lies in this index-browser.js file. After looking at the source code of the config-descriptors.js file, it is found that the reference to the loadPreset method is based on the operation require (". / files")

@ babel/core/lib/config/config-descriptors.js

    ...
    ...
var _files = require("./files");
    ...
    ...
const resolver = type === "plugin" ? _files.loadPlugin : _files.loadPreset;

obviously it is the loadPreset method exposed in @ babel/core/config/files/index.js that should be called as a matter of common sense.
by looking at the compiled code of webpack, it is found that the operation webpack of var _ files = require (". / files") actually introduces @ babel/core/config/files/index-browser.js

.

clipboard.png
@babel/corepackage.json:
@babel/core/package.json


package.jsonbrowser

browserBrowserify

main.jswebpacknodebrowserfiles/index.jsfiles/index-browser.js?
main.js node main.jsindex-browser

node main.js:
clipboard.png

Aug.30,2021

var babel = require("@babel/core");
require("@babel/preset-env");
let code = `
    let a = 1;
    let b = 2
    let add = (a, b) => {
        return a + b
    } 
    var list = [1, 2, 3, 4, 5];
    for (item of list) {
        add(item, a)
    }
`;
var babelOptions = {
  presets: ["@babel/env"]
};
let result = babel.transform(code, babelOptions, function(err, result) {
  console.log("tranform result:", result, err);
});
console.log(result);

https://codesandbox.io/s/407o.
I can test it out with the above code


        var babel = require("@babel/core");
        require("@babel/preset-env");
        babel.transform("{code(){alert(1)}}", {
            presets: ["@babel/preset-env"]
        }, function(err, result) {
          console.log(err, result)
        });

it's the same with me. When I use babel.transform, I can't find presets in option.

        Cannot load preset @babel/preset-env relative to / in a browser
        
        "@babel/core": "7.10.2",
        "@babel/preset-env": "7.10.0",
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4f641-4502e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4f641-4502e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?