diff --git a/README.md b/README.md index 4404808..71c7767 100644 --- a/README.md +++ b/README.md @@ -74,7 +74,7 @@ export default [ module: { rules: [ { - test: /\.marko?$/, + test: /\.marko$/, loader: "@marko/webpack/loader" } ] @@ -84,7 +84,7 @@ export default [ { rules: [ { - test: /\.marko?$/, + test: /\.marko$/, loader: "@marko/webpack/loader" }, // If using `style` blocks with Marko you must use an appropriate loader @@ -98,6 +98,30 @@ export default [ ]; ``` +## Babel options (Marko 5+) + +If you are using Marko 5 with this plugin you can manually override the Babel configuration used by passing a `babelOptions` object along side the `@marko/webpack/loader`. By default Babels regular [config file resolution](https://babeljs.io/docs/en/config-files) will be used. + +```javascript +export default { + module: { + rules: [ + { + test: /\.marko$/, + loader: "@marko/webpack/loader", + options: { + babelOptions: { + presets: [ + ["@babel/preset-env", { node: "current" }] + ] + } + } + } + ] + } + }, +``` + ## Multiple client side compilers Sometimes you need to have multiple compilers for your client side bundles. For example with [`i18n`](https://github.com/webpack/webpack/tree/master/examples/i18n) or [even shipping dynamic runtime bundles to the browser](https://github.com/eBay/arc/tree/master/packages/arc-webpack). @@ -124,7 +148,7 @@ export default [ module: { rules: [ { - test: /\.marko?$/, + test: /\.marko$/, loader: "@marko/webpack/loader" } ] @@ -135,7 +159,7 @@ export default [ name: `Browser-${language}`, rules: [ { - test: /\.marko?$/, + test: /\.marko$/, loader: "@marko/webpack/loader" }, // If using `style` blocks with Marko you must use an appropriate loader diff --git a/src/loader/index.ts b/src/loader/index.ts index 0c87135..b7b3ac4 100644 --- a/src/loader/index.ts +++ b/src/loader/index.ts @@ -67,6 +67,20 @@ export default function(source: string): string { // eslint-disable-next-line @typescript-eslint/no-var-requires const markoCompiler = require((queryOptions && queryOptions.compiler) || DEFAULT_COMPILER); + const babelOptions = Object.assign( + {}, + queryOptions && queryOptions.babelOptions + ); + babelOptions.caller = Object.assign( + { + target: this.target, + supportsStaticESM: true, + supportsDynamicImport: true, + supportsTopLevelAwait: true + }, + babelOptions.caller + ); + const dependenciesOnly = this.resource.endsWith("?dependencies"); const hydrate = this.resource.endsWith("?hydrate"); const assets = this.resource.endsWith("?assets"); @@ -94,7 +108,8 @@ export default function(source: string): string { { writeToDisk: false, requireTemplates: true, - writeVersionComment: false + writeVersionComment: false, + babelOptions } ); } else if (hydrate) { @@ -116,7 +131,8 @@ export default function(source: string): string { sourceOnly: false, writeToDisk: false, writeVersionComment: false, - sourceMaps + sourceMaps, + babelOptions } ); @@ -198,7 +214,8 @@ export default function(source: string): string { writeToDisk: false, requireTemplates: true, writeVersionComment: false, - sourceMaps + sourceMaps, + babelOptions } );