If you find yourself navigating the node universe and utilizing tools like npm, webpack, or others, rest assured that your scripts will be equipped with all necessary components.
However, in a specific project setup:
- You must load individual ES modules directly into the browser
- You are unable to utilize resources like unpkg.com as the final output will be integrated into a hybrid mobile app
- Your goal is to ensure that only essential code is included in the end product
In this scenario, careful selection and adjustments are required. Personally, I am using Vue3 and Pinia, hence I opt for ES module imports within the browser.
Here are some recommended steps:
Begin by downloading the necessary modules through npm following the documentation; for instance, npm install pinia, npm install vue-demi, npm install vue/devtools-api if necessary. If you are new to this process, consider creating a dummy npm lib folder and performing npm install there to gather all packages.
Copy the required files into your project and load them in the browser as modules. As an example, my current setup includes:
<script type="module" src="./js/lib/vue-3.3.8.esm-browser.js"></script
<script type="module" src="./js/lib/vue-devtools-6.5.1.esm/index.js"></script>
<script type="module" src="./js/lib/vue-demi-0.4.16.esm.js"></script>
<script type="module" src="./js/lib/pinia-2.1.7.esm-browser.js"></script>
The necessary files can typically be found within the packages, usually under subfolders such as "dist" or "lib". Your own ES module file might reside in a directory like:
E:\Users\Peter...\Documents\.....\npmlib\node_modules\pinia\dist\pinia.esm-browser.js
Vue demi serves as a simple script that mainly imports and exports elements from Vue, while adding functionalities like set() and del() to the interface, along with other modifications for Vue3 compatibility. To create your own ES module, you'll need to tweak the index files accordingly. My approach involves extracting /lib/v3/index.mjs from the package root, adjusting the import statement paths, and saving it as vue-demi-0.4.16.esm.js.
Since these files are primarily designed for package managers, adjustments to the import statements' from section become essential. The browser needs to locate the referenced files correctly.
When examining pinia.esm-browser.js, we notice that many imported names stem from Vue.js except set and del, which originate from vue-demi. In essence, there is no oversized/vue-demi script to hunt down; vue-demi simply acts as a conduit for importing features from Vue.
For example, my pinia-2.1.7.esm-browser.js now contains:
//import { hasInjectionContext, inject, toRaw, watch, unref, markRaw, effectScope, ref, isVue2, isRef, isReactive, set, getCurrentScope, onScopeDispose, getCurrentInstance, reactive, toRef, del, nextTick, computed, toRefs } from 'vue-demi';
import { hasInjectionContext, inject, toRaw, watch, unref, markRaw, effectScope, ref, isVue2, isRef, isReactive, set, getCurrentScope, onScopeDispose, getCurrentInstance, reactive, toRef, del, nextTick, computed, toRefs } from "./vue-demi-0.4.16.esm.js";
//import { setupDevtoolsPlugin } from '@vue/devtools-api';
import { setupDevtoolsPlugin } from "./vue-devtools-6.5.1.esm/index.js";
A glimpse at vue-demi-0.4.16.esm.js reveals:
import * as Vue from "./vue-3.3.8.esm-browser.js";
var isVue2 = false
var isVue3 = true
var Vue2 = undefined
... Remainder of the content remains unchanged ...
export * from "./vue-3.3.8.esm-browser.js";
export {
Vue,
Vue2,
isVue2,
isVue3,
install,
}
All the necessary elements are present; adjust and align them with appropriate export statements.
There are more sophisticated approaches available for enhancing flexibility in import statements, publishing, and updating procedures. Nonetheless, the fundamentals shared here are functional.
Edit 02.12.23
Once you have identified the requisite files, refrain from altering third-party code solely to match import statements. Instead, as highlighted by @Estus Flask's comment, utilize the import map feature for seamless integration. Here's how:
<script type="importmap">
{
"imports":{
"vue": "./js/lib/vue-3.3.8.esm-browser.js",
"vue-demi": "./js/lib/vue-demi-0.4.16.esm.js",
"@vue/devtools-api":"./js/lib/vue-devtools-6.5.1.esm/index.js"
}
}
</script>
By implementing the import map, even third-party entities will seamlessly access the unaltered files.
Note that the import map necessitates adherence to strict JSON syntax rules, unlike pure JavaScript. For instance:
"imports":{ ... }
is valid, whereas:
imports: { ... }
would not comply due to JavaScript's requirements for property names, contrasting with import map's JSON prerequisites.