使用parcel api 进行npm 项目
parcel 提供了api 我们可以方便的集成到项目中，直接进行代码的构建
参考需要构建的项目
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module" src="app.js">
</script>
<my-element></my-element>
</body>
</html>
app.js
import {LitElement, html} from 'lit';
class MyElement extends LitElement {
render() {
return html`
<div>Hello from MyElement!</div>
`;
}
}
customElements.define('my-element', MyElement);
package.json
{
"name": "mynpm-app",
"version": "1.0.0",
"source": "index.html",
"license": "MIT",
"devDependencies": {
"parcel": "^2.2.1"
},
"scripts": {
"build": "parcel build",
"watch": "parcel --public-url http://localhost:1234"
},
"dependencies": {
"@parcel/config-default": "^2.2.1",
"@parcel/core": "^2.2.1",
"lit": "^2.1.2"
}
}
api 构建
rong.js
const { Parcel } = require('@parcel/core');
let bundler = new Parcel({
entries: 'index.html',
defaultTargetOptions: { distDir: "mydemoapp/rong",publicUrl:"." },
defaultConfig: '@parcel/config-default'
});
(async function () {
try {
let { bundleGraph, buildTime } = await bundler.run();
let bundles = bundleGraph.getBundles();
console.log(`✨ Built ${bundles.length} bundles in ${buildTime}ms!`);
} catch (err) {
console.log(err.diagnostics);
}
})()
效果
说明
当然提供api 的构建工具是不少的，比如webpack,parcel 的好处很明显，简单，零配置（当然也是需要配置的，只是简单很多了）
参考资料
https://webpack.js.org/api/node/
https://parceljs.org/features/parcel-api/
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
2021-02-07 dremio 集群简单部署
2020-02-07 pgspider 常用pg 扩展docker 镜像
2020-02-07 使用 pgspider griddb fdw 让griddb 支持hasura graphql-engine
2020-02-07 pgspider griddb 试用
2019-02-07 WebSocket-Over-HTTP Protocol
2019-02-07 pushpin Server-sent events && openresty 集成试用
2019-02-07 Rendering on the Web