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
@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: