Estoy usando módulos es6 nativos en un sitio estático.
<script type="module" src="./main.js"></script>Antes de implementar, paso archivos js a través de babel
// webpack.config.js
rules: [ { test: /\.js$/i, exclude: /node_modules/, use: ['babel-loader'], } ]// .babelrc
{ "presets": [ [ "@babel/preset-env", { "modules": false, } ] ] }Por defecto, babel convierte los módulos en js comunes, aunque tengo un indicador de "módulos": falso en mi .babelrc
No quiero que babel convierta los módulos en commonjs, solo quiero convertir todo excepto importar y exportar en es2015, para poder usar módulos nativos en el navegador
Así: // main.js antes
export default () => { return 'Hello world!' }// main.js después de babel
export default function () { return 'Hello world!' }De acuerdo con la documentación, babel proporciona un módulo: opción falsa, pero no funciona para mí
Además, la persona que llama no funciona con supportStaticESM
{ test: /\.js$/i, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], caller: { supportsStaticESM: true } } } }Sin embargo, cuando uso babel-cli obtengo lo que necesito.
creo que webpack no es compatible con babel en este caso
Gracias.
"babel-loader": "8.0.5" "webpack": "^5.40.0"Para mí, solo especificar target funcionó.
module.exports = { entry: './js/index.js', // ... target: ['web', 'es5'] }Si funciona con Babel pero no con Webpack, lo más probable es que la configuración de Webpack anule la configuración de Babel.
Intente eliminar los presets: ['@babel/preset-env'], de la configuración de Webpack (si está presente).