I'm trying to use babel on my webpack.min.js but I don't know how to do it. A few tutorials online talk to use .babel() instead .scripts() but still don't work. Anyone can help?
My current webpack:
const {mix} = require('laravel-mix');
const sigScripts = [
'file1.js',
'file2.js'
];
mix.scripts(sigScripts, 'public/js/app.js')
.sass('diretory/to/file/file.sass', 'public/css/file.css')
.combine([
'file1.css',
'file2.css'
], 'public/css/app.css')
.browserSync('localhost');
if (mix.inProduction) {
mix.version();
}
A slight variation of mix.scripts() is mix.babel(). Its method signature is identical to scripts; however, the concatenated file will receive Babel compilation, which translates any ES2015 code to vanilla JavaScript that all browsers will understand.
As I said, I tried this before (that's the tutorial I followed) and I got this error:
DONE Compiled successfully in 4306ms 6:42:07 PM
<--- Last few GCs --->
[21840:0x2d56c10] 18760 ms: Mark-sweep 1393.0 (1424.4) -> 1392.6 (1422.9) MB, 955.5 / 0.0 ms (average mu = 0.061, current mu = 0.022) allocation failure scavenge might
not succeed
[21840:0x2d56c10] 18765 ms: Scavenge 1393.3 (1422.9) -> 1393.0 (1423.4) MB, 3.1 / 0.0 ms (average mu = 0.061, current mu = 0.022) allocation failure
[21840:0x2d56c10] 18770 ms: Scavenge 1393.7 (1423.4) -> 1393.3 (1424.4) MB, 2.5 / 0.0 ms (average mu = 0.061, current mu = 0.022) allocation failure
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 0x4e0c925be1d]
1: StubFrame [pc: 0x4e0c92134b0]
Security context: 0x0fe2cc69e6e9 <JSObject>
2: visitQueue [0x2ceee0f52591] [/var/www/html/sig-laravel/node_modules/babel-traverse/lib/context.js:~114] [pc=0x4e0c96c1617](this=0x1c2d4ded59b1 <TraversalContext map = 0xd19305a0399>,queue=0x1c2d4ded60e9 <JSArray[1]>)
3: visitMultiple [0x2ceee0f52511] [/var/www/html/sig-laravel/node_modules/babel-traverse/lib/con...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x8fa090 node::Abort() [node]
2: 0x8fa0dc [node]
3: 0xb0039e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
4: 0xb005d4 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
5: 0xef4ae2 [node]
6: 0xef4be8 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [node]
7: 0xf00cc2 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
8: 0xf015f4 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
9: 0xf04261 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [node]
10: 0xecd6e4 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [node]
11: 0x116d86e v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [node]
12: 0x4e0c925be1d
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Please or to participate in this conversation.