I'm new to WordPress development.
I have been following a tutorial in Udemy to build my new WordPress website. As recommended by the trainer, it is useful to use npm to package the JavaScripts using "#wordpress/scripts". The npm command monitors a single index.js file, which is then compiled into WordPress friendly version. Then in functions.php I added the wp_enqueue_script() function to call the index.js from build folder.
The problem: I have created multiple JavaScript files, which contain new classes with the required code and are imported into the main index.js file. Each parent JavaScript file is responsible for a specific functionality, e.g. I have MyLogin.js file which is responsible for handling user login and another file EditProfile.js which handles user profile editing functionality. The EditProfile.js should be called/instantiated only when the user is logged in and the MyLogin.js should be called/instantiated only when user is not logged in. According to the articles I have read online, I can use functions.php to enqueue specific JavaScript files when a user is on a specific page. This would work if I would not use the npm to package my JavaScripts into a single file, but how do I handle the load of required JavaScript files from a single bundled index.js file?
The only solution I thought of, was to create an evaluation statement in the index.js file to only call/instantiate the required class if the current page is home page or profile page respectively, but to me it seems as a bad coding practice.
Can you please guide me to the right direction?
P.S. Is it even worth to use "#wordpress/scripts" to compile everything into a single file?
Here is my index.js file
import "../css/general.css";
import "../css/style.css";
import "../css/queries.css";
import "../css/profile.css";
import "../css/login.css";
import "../css/front-page.css";
import EditProfile from "./modules/EditProfile";
import MyLogin from "./modules/MyLogin";
const myLogin = new MyLogin();
const editProfile = new EditProfile();
The logic I was thinking of would be something like this:
import "../css/general.css";
import "../css/style.css";
import "../css/queries.css";
import "../css/profile.css";
import "../css/login.css";
import "../css/front-page.css";
import EditProfile from "./modules/EditProfile";
import MyLogin from "./modules/MyLogin";
if (window.location.href == "https://<site_url>") {
const myLogin = new MyLogin();
}
if (window.location.href == "https://<site_url>/profile") {
const editProfile = new EditProfile();
}
Related
I'm upgrading a React application and have found that I need to modify the import statements to get them to work.
For example, in the old version, the following import works without errors:
import { User } from '../System'
Note that System is a directory on my file system that contains User, a js file that ends with export default User.
In my upgraded version of the app, the System directory still exists, but the above import gives me Can't resolve '../System' in 'C:\my app\.
It turns out that to get the import working properly now, I need to change it to the following:
import User from '../System/User';
If I understand correctly, this relates to js module system changes made with ES6.
My question, though, is regarding the specification of a directory in the import statement (System above). Why would it be that I was previously able to name a file directory in the import statement instead of the actual js script/module itself? Is that approach of using a directory in the import statement still possible? And if so, is it ever advisable?
Update: based on AKX's comment, I noticed the System directory does indeed contain an index.js, which apparently is what makes the import from the directory itself possible.
When an import points to a directory, and only a file, Webpack (which most React setups use) follows Node's's conventions and will attempt to import index.js from that directory if it exists. That's the only condition under which importing from a path that points to a directory works - your previous build probably had /System/index.js (which would allow importing with from '../System'). If you rename the file you're importing to anything else - such as to User.js - importing using only the directory path will fail.
And if so, is it ever advisable?
Sure, if you want. It's a style choice but is commonly done.
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.
I've been trying to use Dynamic Importing in Nextjs in order to use the screenfull library but it hasn't worked.
import dynamic from "next/dynamic"
import screenfull from 'screenfull';
const Screenfull = dynamic(()=>{return import("screenfull")},{})
You're using dynamic imports incorrectly. The idea is that you can import part of a JS module inside of another piece of JS code, so you don't have to preload or load the entire library. An example might be doing a dynamic import after an async call.
Next has some other great examples of how to use this functionality in your application.
you can create file in #utils folder with below code:
import screenfull from 'screenfull';
export default screenfull
then in your component do something like so:
import dynamic from 'next/dynamic';
const screenful = dynamic(() => import('../#utils/screenfull'))
The first question that comes to mind is what's the error you're getting?
There's no reason you shouldn't be able to import any library you've installed locally!
Did you actually install that package by running npm install screenfull on your terminal?
i am using webpack js bundle for my project.I have published a npm module and which included in my webpack entry file.i can access it inside entry file.But that file i can not access inside another file which included in entry file in webpack.Here is my entry file
import myClass from "sbkkoovery-esign";
console.log(myClass);
import "jquery";
import 'bootstrap';
import "./js/app";
here 'myClass' is working properly.But i tried to access 'myClass' inside '/js/app' file.But i am getting error.Here is mu 'js/app' file
console.log("here");
console.log(myClass);
I was also facing same issue few days back, In this case, rather then to use any node-plugin I have directly given "javascriptfilename.min.js" file path inside tags in "index.html".
Note: This is not the correct solution, this is just temporary.
I am wondering if it is possible to re-configure the import behavior (looking for index.js) on importing module folders directly. By default, when you assume this module folder structure:
/components
/Button
/index.js
/style.scss
/Checkbox
/index.js
/style.scss
I can easily import the components like this:
import Button from 'components/Button';
import Checkbox from 'components/Checkbox';
But when I am working on that components, I will have multiple index.js files open in my editor/ide which will lead to confusion very quickly. Same applies for the style files.
What I did now is changing my folder structure to this:
/components
/Button
/Button.js
/Button.scss
/Checkbox
/Checkbox.js
/Checkbox.scss
Which solved that problem and I can see directly where each opened file belongs to.
However, now my component imports look a bit... verbose:
import Button from 'components/Button/Button';
import Checkbox from 'components/Checkbox/Checkbox';
Because obviously, webpack/babel would look for an "index.js" when I am importing a folder directly. Now my question is: can I change that behavior somehow? I'd like to tell webpack/babel that it should try to import a file named the same way as the folder as the index file.
You can re-configure directory indexes on every webserver, so I am hoping the same is possible with webpack/babel but googling didnt show anything up so far.
I went with the following solution:
In each of my folders, I will create a index.js next to the "real" module, that has the follwing content:
import module from './Button.js';
export default module;
This way I am able to keep my code in Button.js but am not required to import Button/Button someplace else.
I created a little script which automates the creation of the index.js files for me, so I don't have any additional work.