Let me preface this with the following.
I’m very new to everything you read about here.
I’m trying to use a javascript dependency manager – yarn.
Bundling the dependencies – webpack seems to be the way.
Using javascript modules rather than classic javascript scripts.
I’ve got a PHP project that doesn’t use a front-end framework perse.
It’s a custom “framework” where each .php file (contains primarily HTML) and has an accompanying .js file.
For example,
If I have a home page.
I have Home.php and Home.js files.
I have JS dependencies and I’m using yarn as a package manager for it. (this downloads and unpacks each dependency in the node_modules folder).
I intend to refer the resources directly from this folder without bundling them (at least till I figure out webpack).
So in the beginning of the home.php file I include the dependencies w.r.t the node_modules folder.
What I want to do is the following:
I want to utilize the dependencies directly.
I’ll take the example of tempus Dominus.
I’m using vscode and I get an auto import when I create an instance of it’s class.
import { TempusDominus } from "../../node_modules/@eonasdan/tempus-dominus/types/tempus-dominus";
let tmp = new TempusDominus();
This because I have a jsconfig.json file with mode as es6. I need this for relative imports.
One, I am getting the types import which I believe is used for typescript. I’m not sure about this. This is very new to me.
Second, when I open the page in the browser,
it fails (naturally) since it’s not giving the extension, which can be solved from the settings of vscode to add the extension. But when I do enable it, it adds the extension .js where the file is a *.d.ts file.
Which leads me to believe there is something wrong with my settings.
I have been scratching my head for a long time now. Cant get anywhere with this.
Coming to webpack, the issue with using webpack for me is the following:
Since I have an accompanying js file for each php file, how do I go about bundling them?
Do I even bundle each of those files or leave them to be?
I have referred to the following linkto understand a bit better regarding webpack. But couldn’t really understand how to handle my js files.