drill.js is an enhanced web loading tool designed to free front-end developers from relying on Node.js. It provides rich extension features and supports declarative module loading.
Compared to traditional front-end development approaches, drill.js offers a more flexible way to load and handle modules, making front-end development more convenient and efficient.
- drill-less : Enables direct support for
.lessfiles in browsers. - drill-ts : Enables direct support for
.tsfiles in browsers.
You can install drill.js using one of the following methods:
- CDN: Include the following script tag in the
<head>section of your HTML file:
<script src="https://cdn.jsdelivr.net/npm/drill.js/dist/drill.min.js"></script>- Package Manager: Use npm or yarn, or any other package management tool, to install:
npm install drill.jsBefore using drill.js, you need to include the drill.js script in your HTML file to initialize the environment. It is recommended to place the initialization script in the <head> section of the HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script src="https://cdn.jsdelivr.net/npm/drill.js/dist/drill.min.js"></script>
<!-- Other contents of the head section -->
</head>
<body>
<!-- Page content -->
</body>
</html>In an ES module environment, you can use the lm method to load modules. Here is an example of loading the test-module.mjs module:
Click here to see the live demo
// target/test-module.mjs
export const getDesc = () => {
return "I am target/test-module.mjs";
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Load Module</title>
<script src="https://cdn.jsdelivr.net/npm/drill.js/dist/drill.min.js"></script>
</head>
<body>
<script type="module">
const load = lm(import.meta);
(async () => {
const test = await load("./target/test-module.mjs");
document.write(test.getDesc());
console.log(test.getDesc()); // => I am target/test-module.mjs
})();
</script>
</body>
</html>You can use the load method to load modules using the same syntax as asynchronous import. The loaded module can be accessed using the test variable to access the exported content of the module.
You can use the <load-module> or <l-m> tags for declarative module loading, similar to using the <script> tag to load modules.
<load-module src="path/to/the/module.mjs"></load-module>
<!-- or -->
<l-m src="path/to/the/module.mjs"></l-m>This approach has the same effect as the traditional <script> tag, making it easy to declare module loading.
You can extend the support for specific file types in drill.js using the lm.use method. Here is an example of extending support for .json files:
use("json", async (ctx, next) => {
const { url } = ctx;
ctx.result = await fetch(url).then((e) => e.json());
next();
});Using a middleware mechanism similar to Koa, you can set ctx.result to return the corresponding content. You can use lm.use to extend support for more file types.
Check out the example code for officially supported types, and see the live demo as well.
You can use the lm.use method to preprocess module data. Here is an example of registering data for preprocessing components:
Click here to see the live demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Module Preprocessing</title>
<script src="https://cdn.jsdelivr.net/npm/drill.js/dist/drill.min.js"></script>
<script src="./register-drill.js"></script>
<l-m src="./test-comp.mjs"></l-m>
</head>
<body>
<test-comp></test-comp>
</body>
</html>// register-drill.js
lm.use(["js", "mjs"], async (ctx, next) => {
const { content, tag, type, style } = ctx.result;
if (type === "component") {
class MyElement extends HTMLElement {
constructor() {
super();
this.innerHTML = content;
style && Object.assign(this.style, style);
}
}
customElements.define(tag, MyElement);
}
next();
});// test-comp.mjs
export const type = "component";
export const tag = "test-comp";
export const content = "Hello, World! This is my custom element.";
export const style = {
color: "red",
padding: "10px",
margin: "10px",
backgroundColor: "#eee",
};In preprocessing, you can perform corresponding operations based on the module's type and content. In the above example, the component registration data is processed into a custom element.
The above content covers some of the documentation for drill.js. Continue writing the remaining content, including examples, usage, frequently asked questions, API references, and so on.
For details on developing plugins, please click here to read .