Foundation 6.4 app.js Handpick components with import - javascript

Using the new Panini Zurb template with webpack.
It is not clear yet how to handpick modules/components following the one line of instructions they provide in app.js:
import $ from 'jquery';
// import whatInput from 'what-input';
window.$ = $;
// import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out
the above and uncomment
// the line below
// import './lib/foundation-explicit-pieces';
import {Tabs} from './lib/foundation-explicit-pieces';
$(document).foundation();
// if($('#about-tabs').length) {var _tabs = new Foundation.Tabs($('#about-tabs'));}
link to the section:
github repo
And at this point it's working, but it seems like everything in foundation is packaged resulting in a ~270KB file.
I'm definitely not aware of all the aspects of import/export, any suggestion on a comprehensive source will be very appreciated.

Apparently it was intuitive enough, in the support file it's enough to comment out the single imports.
With all out but 1 component the filesize becomes still ~160KB after build.
Any way to tree shake more? It's basically the same as the previous version without webpack

Related

Need help help knowing where to import Swiperjs

Like the title says, I'm in need of help knowing to import swiperjs. I'm fairly new to Javascript so I'm still learning the ropes.
I've already installed it via NPM and if you read the document is says "By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too". My problem and question is how and where? Do I go to configure them? Do I go inside Swiperjs core.js and configure it there or do I use my current app.js and add the import there? or make a new js file and do it there?
Thank you for taking the time to answer my question.
Ps: All I'm using is html, css, sass, javascript, Jquery as a framework and using Babel
You can import Swiperjs inside your app.js if that is your main file.
You import it with this code:
// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);
// init Swiper:
const swiper = new Swiper(...);
If anyone not using webpack then just use require
const Swiper = require('../../node_modules/swiper/swiper-bundle');
Note: correct the path of your node_modules folder. For me, nothing worked above.

How can I exclude an ES6 module (VueJS) from treeshaking in RollupJS? (and should I?)

Right now I pull in all my own es6 modules and create a bundle using Rollup.
Recently I started using VueJS, which now has an ES6 Module which can be pulled in just like my own modules. Rollup does some treeshaking on it, but I don't know if that is a very good idea? I don't know what it is doing, so I would rather it does nothing!
Instead I just add vue at the end of my HTML:
<script src="dist/bundle.js"></script>
I love the convenience of having everything as one bundled file, but should I really treeshake the entire Vue app, is there a command in Rollup that I can not treeshake just this one module?
EDIT
I have found the --external option, which seems good as it would just keep the import for vue and bundle the rest, but it does not seem to work!
When I use rollup --format=iife --external=../node_modules/vue/dist/vue.esm.browser.js --file=dist/bundle.js -- src/main.js it says Error: Could not resolve '../node_modules/vue/dist/vue.esm.browser.js' from src/app.js.
In my main.js it has import Vue from '../node_modules/vue/dist/vue.esm.browser.js; which works fine for the app. I want to make Vue an external, but it won't work!
To prevent Rollup from treeshaking a particular module, you can simply import it blindly (instead of a part of it), so that Rollup thinks the module performs some side effect:
import 'vue'
Of course you can still import some bits in parallel, so that you can rename the default export for example:
import 'vue'
import Vue from 'vue'
As for your --external option, you probably just need to wrap the path value with quotes:
--external='../node_modules/vue/dist/vue.esm.browser.js'
Note that you should probably switch to Rollup configuration file (instead of CLI options) to make your life easier. You will also be able to use rollup plugins, e.g. rollup-plugin-alias to manage the exact location of the Vue file you want to use.

Create-react-app javascripts calling each others' functions not working

I am learning React.js with the create-react-app framework.
I need to use a readymade admin template which has javascript files calling other JS files' modules.
e.g.
In App.js I have:
1. import $ from 'jquery'
2. import Layout from './css/layout.min.js'
3. import Navbar from './js/navbar.min.js'
In navbar.min.js, I am getting an error:
1. $ is not defined
2. Layout (a function of layout.min.js) is not defined
There are hundreds of such modules so manual import from each JS is not an option.
So far I've tried exporting $, Layout from App.js but no results.
Any help would be appreciated.
You should do ( id you didn't)
npm i jquery --save
And in your layout.min.js you should have export default.
Btw, maybe it should be import Layout from './js/layout.min.js'?

What's the behavior of webpack imports in ReactJS project?

I've used multiple 3rd party libraries in my ReactJS project like lodash, d3 etc. I just found out that I've not written explicit imports
like
import d3 from 'd3'
or import _ from 'lodash'
in all my components (I've imported them in some though). Yet it all works fine and I can also get the d3 object and _ in the browser console. How is it supposed to be?
Considering this is okay behavior can I just import the node_modules dependencies for react only once in my App(Root) Component and don't import them at all in all the other child components.
P.S I'm using webpack 1 and I've verified the behavior.
Even when it works, it is a bad practice, so my advice would be to play nice and always explicitly import modules you are using.
The reason why it is working is probably because some of those modules declare globals when they are imported, so your components that do not import them still reach global.

How to import mutiple modules from webpack?

I've around 20 jsx files with the few repeated imports like :
import React from 'react';
import { Form } from 'formsy-react';
import AppActions from '../../utils/actions/app-actions';
import store, {formStore} from '../../utils/stores/stores';
import AppConstants from '../../utils/constants/app-constants';
which cause my bundle.js weight more than 1.7 Mb even after minification.
Is there any possiblity to import these modules from any where else so that I don't need to import these again and again.
I think there is a misunderstanding here between Webpack, ES6 and a module.
Webpack is going to analyse your javascript code and detect the dependencies, based on that it will include the modules you need in your bundle, there is no duplicate there, every module is added only once in the proper order to resolve the dependencies while avoiding duplicates of code.
ES6 import export syntax convention requires to define the imports you need in every file that requires them, so browsers or tools like Webpack can properly detect dependencies and only use files they need.
1.7 Mb can be considered as a big file for a web page, but with a proper caching/minification it can be loaded instantly

Categories