I have ES6 JavaScript code in my Vue components. In order to support IE 11 I need to convert it to ES5 code using babel and laravel-mix. How do I do that?
Here is my webpack.mix.js file.
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/admin-app.js', 'public/js')
There's a mix.babel() command that can handle this.
It's identical to mix.scripts() so it requires a little more legwork. I cheat and do this and then serve the es5.js to IE:
mix.js('resources/assets/js/app.js', 'public/js')
.babel('public/js/app.js', 'public/js/app.es5.js')
.sass('resources/assets/sass/app.scss', 'public/css');
The code is not 100% correct, babel first argument can be an array, if we want to pass multiple files:
mix.js('resources/assets/js/app.js', 'public/js')
.babel(['public/js/app.js'], 'public/js/app.es5.js')
.sass('resources/assets/sass/app.scss', 'public/css');
I will prefer to maintain app.js as my final js output. It's a preferred naming convention.
So like every other person, if babel works for you, then
webpack.confog.js
mix.js('resources/assets/js/app.js', 'public/js/app1.js')
.babel('public/js/app1.js', 'public/js/app.js')
.sass('resources/assets/sass/app.scss', 'public/css');
With this I still maintain public/js and entry point through out my application.
But I prefer using the solution I posted here:
Laravel Mix: Configure Babel for IE11 compatibility (transformations and polyfills)
Related
I have a Laravel and Vue project in which I'm using dynamic import function calls in the Vue to chunk my components into separate files.
Everything's working fine, but the Vue chunk files (e.g., 0.js, 1.js, etc.) are being placed directly under the public directory, instead of under public/js, which is where app.js is.
Here is my Laravel Mix file:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js/')
.sass('resources/sass/vendor.scss', 'public/css/')
.sass('resources/sass/app.scss', 'public/css/')
.version();
What do I need to change/add to get the Vue chunk files to be automatically placed within public/js when I build every time, instead of directly under the public directory? Thanks.
You can add the path in webpack like following
mix.webpackConfig({
output: {
chunkFilename: 'js/chunks/[name].js',//replace with your path
},
});
See this GitHub issue for more information
I have a Laravel project using Laravel Mix, Vue.js and Sass.
The following is the content of the webpack.mix.js file in the project:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.extract(['vue'])
.sass('resources/sass/vendor.scss', 'public/css/')
.sass('resources/sass/app.scss', 'public/css/');
This Mix file is properly compiling all the CSS and JS assets for me when I import all of my Vue components into a master Vue component called App as follows:
// Layout
import SiteFooter from './layout/SiteFooter';
import SiteHeader from './layout/SiteHeader';
// Pages
import Home from './pages/Home';
// And many more here...
export default {
components: {
SiteFooter,
SiteHeader,
// Pages
Home,
// etc...
}
However, as I started to create a lot of components. app.js started to get too big, so then I switched to loading the components in App asynchronously as follows:
// Layout
import SiteFooter from './layout/SiteFooter';
import SiteHeader from './layout/SiteHeader';
export default {
components: {
SiteFooter,
SiteHeader,
// Pages
Home: () => import('./pages/Home'),
// And many more here...
This perfectly achieved the goal of reducing the size of app.js and breaking the components up into separate files, which is great, but as soon as I did this, the Sass stopped compiling into app.css and vendor.css files, and I had no styles on the site.
I played around for a bit and realized that if I removed the extract(['vue']) line from webpack.mix.js, then the Sass would correctly compile again and the styles would display correctly, but then app.js would increase in size by about 330k because of the inclusion of the Vue code.
What I'm wondering is: Why does having the extract(['vue']) method call in the Mix file along with using asynchronous components in Vue cause the Sass to not be compiled, and more importantly, is there a way to pull the Vue code out into a separate vendor.js file as well as get the Sass to properly compile when Vue components are asynchronously loaded? Thank you.
Something's making my out-of-the-box Laravel project with browser-sync and the browser-sync-webpack-plugin installed to load infinitely on the browser-sync page. It works fine on http://localhost, but the browser-sync (localhost:3000) version doesn't stop loading and displays no content, just a white page.
I found this question which was similar to mine but it doesn't have any answers.
This only recently started happening on my machine. At first I thought it was because of the antivirus or firewall but disabling them did no good. I can't even figure out what's causing the page to never load.
Here's what my webpack.mix.js file looks like:
mix.js('resources/assets/js/script.js', 'public/js')
.sass('resources/assets/sass/main.scss', 'public/css')
.disableNotifications()
.browserSync();
Edit: Any tips on narrowing down the problem would also be appreciated.
For me, the problem was adding to the windows hosts file whatever url browsersync was proxying to, and point it to 127.0.0.1.
The default proxy target for the mix-browsersync package used in Laravel is app.test.
You can specify a different proxy target in the mix file:
mix
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/app.js', 'public/js')
.browserSync('localhost');
And, if like me, you're using the artisan server for development, you can even target that (as long as you're running php artisan serve in you project):
mix
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/app.js', 'public/js')
.browserSync('localhost:8000');
I have a possible solution for you that worked for me.
My issue was that I was fixated on using the localhost:8000; instead I tried 127.0.0.1:8000. For those of you who don't know, that IP address is your default localhost IP address.
Try adding it like this to you webpack.mix.js file \/\/\/
mix.browserSync({
proxy: 'http://127.0.0.1:8000'
});
Or alternatively you can use
mix.browserSync('127.0.0.1:8000');
Once done you can run npm run watch.
Hi I am using laravel mix with my Laravel 5.5
I have my mix file like this:
/* Production settings */
if (mix.inProduction()) {
mix.version();
mix.disableNotifications();
}
/* Sass Processing */
mix.sass('resources/assets/sass/_bootstrap.scss', 'public/css/bootstrap.css');
mix.sass('resources/assets/sass/navigation.scss', 'public/css/navigation.css');
mix.sass('resources/assets/sass/global.scss', 'public/css/global.css').options({
processCssUrls: false
});
mix.sass('resources/assets/sass/cards.scss', 'public/css/cards.css')
.sass('resources/assets/sass/forms.scss', 'public/css/forms.css')
.sass('resources/assets/sass/search.scss', 'public/css/search.css')
.sass('resources/assets/sass/profile.scss', 'public/css/profile.css')
.sass('resources/assets/sass/event.scss', 'public/css/event.css')
.sass('resources/assets/sass/entity.scss', 'public/css/entity.css')
.sass('resources/assets/sass/travel.scss', 'public/css/travel.css')
.sass('resources/assets/sass/sliders.scss', 'public/css/sliders.css')
.sass('resources/assets/sass/login.scss', 'public/css/login.css');
mix.styles([
'resources/assets/css/bootstrap-social.css',
'resources/assets/css/dropzone.css',
'resources/assets/css/jquery-ui.css',
'resources/assets/css/jquery-ui.structure.css',
'resources/assets/css/jquery-ui.theme.css',
'resources/assets/css/font-awesome.css',
'resources/assets/css/animate.css',
], 'public/css/style.css');
/* Global JS */
mix.scripts([
'resources/assets/js/pace.js',
'resources/assets/js/jquery.js',
'resources/assets/js/page-load.js',
'resources/assets/js/bootstrap.js',
'resources/assets/js/jquery-ui.js',
'resources/assets/js/favourites.js',
], 'public/js/global.js');
mix.js('resources/assets/js/dropzone.js', 'public/js/dropzone.js');
mix.js('resources/assets/js/image-upload.js', 'public/js/image-upload.js');
mix.js('resources/assets/js/googlemap.js', 'public/js/googlemap.js');
mix.js('resources/assets/js/entity.js', 'public/js/entity.js');
mix.js('resources/assets/js/validation.js', 'public/js/validation.js');
mix.js('resources/assets/js/search.js');
mix.js('resources/assets/js/homesearch.js', 'public/js/homesearch.js');
mix.js('resources/assets/js/instantsearch.js', 'public/js/instantsearch.js');
mix.js('resources/assets/js/featured.js', 'public/js/featured.js');
mix.js('resources/assets/js/tram.js', 'public/js/tram.js');
mix.js('resources/assets/js/counter.js', 'public/js/counter.js');
What I wanted to do is use the extract method as mentioned in documentation:
Vendor Extraction - One potential downside to bundling all application-specific JavaScript with your vendor libraries is that it
makes long-term caching more difficult. For example, a single update
to your application code will force the browser to re-download all of
your vendor libraries even if they haven't changed.
If you intend to make frequent updates to your application's
JavaScript, you should consider extracting all of your vendor
libraries into their own file. This way, a change to your application
code will not affect the caching of your large vendor.js file. Mix's
extract method makes this a breeze:
mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue'])
The extract method accepts an array of all libraries or modules that
you wish to extract into a vendor.js file. Using the above snippet as
an example, Mix will generate the following files:
public/js/manifest.js: The Webpack manifest runtime
public/js/vendor.js: Your vendor libraries
public/js/app.js: Your application code To avoid JavaScript errors, be sure to load these files in the proper order:
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
So I have created an empty file in: resources/assets/js/app.js and in my webpack:
mix.js('resources/assets/js/app.js', 'public/js')
.extract(['jquery', 'bootstrap', 'pace'])
Everything is being processed successfully, I attached all the files. app.js seems to have required content however when I get to the page apparently jquery is not being defined.
What could be the cause? I have installed bootstrap, jquery, and pace throught npm.
With vue, jquery plugins have certain conflict
https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
I have configured my app to be available under an alias (http://localhost/myapp). How can i configure mix to reflect this in the manifest file? I want to reference /myapp/css/app.css instead of /css/app.css.
Thanks in advance.
You can disable it, read the docs here https://laravel.com/docs/5.4/mix#url-processing
mix.sass('resources/assets/app/app.scss', 'public/css')
.options({
processCssUrls: false
});