简介
bili 是一个基于 Rollup 的构建工具,主要用于打包 JavaScript 库。它提供了简单易用的配置方式,并且默认支持常见的JS模块规范,如 CommonJS、ES6 和 UMD。
本文将介绍如何使用 bili 打包你的前端项目,并提供示例代码以指导你完成整个流程。
安装
你可以通过以下命令在你的项目中安装 bili:
npm install --save-dev bili
安装成功后,你可以在项目中使用 bili 命令。
配置
bili 的默认配置已经足够满足大部分需求,但是如果你需要更多自定义的配置,那么你可以创建一个 bili.config.js
文件来覆盖默认配置。下面是一个示例配置文件:
-- -------------------- ---- ------- -------------- - - ------ --------------- ------- - ------- ------- ------ ------- ----------- ------------ -------- -- ------ -- - ------ ------------------------- -- ---------- ----- ------- ---- -- -------- - -------------------------------- -------- --------------------- --- ---------------------------------------- ------------------------------------ --------------------------------- - -
在这个配置文件中,我们指定了输入文件的路径,以及输出文件的格式、名称和其他选项。我们还添加了一些插件来处理 JavaScript 代码。
打包
创建好配置文件后,你可以在项目根目录下运行以下命令来打包你的项目:
npx bili
这将使用默认配置文件进行打包。如果你已经创建了自定义的配置文件,那么你可以通过以下方式运行 bili:
npx bili --config <path/to/config/file>
示例代码
下面是一个示例项目,它使用 bili 来打包一个简单的 Vue.js 组件:
src/index.js
-- -------------------- ---- ------- ------ --- ---- ----- ------ ----------- ---- ------------------- ------ ------- - -------- -------- ----- - ----------------------------- ------------ - -
src/MyComponent.vue
-- -------------------- ---- ------- ---------- ----- ------ ----- ------- ----- ------- ------ ------ ----------- -------- ------ ------- - ----- -------------- ------ - ------ ------- -------- ------ - - ---------
bili.config.js
-- -------------------- ---- ------- -------------- - - ------ --------------- ------- - ------- ------- ------ ------- ----------- ------------ -------- -- ------ -- - ------ ------------------------- -- ---------- ----- ------- ---- -- -------- - -------------------------------- -------- --------------------- --- ---------------------------------------- ------------------------------------ --------------------------------- - -
package.json
-- -------------------- ---- ------- - ------- ------------- ---------- -------- ------- ------------------------- --------- ------------------------- -------- ------------------------- ---------- - -------- ------ -- ------------------- - ------ --------- -- ------------------ - ------- --------- ---------------------- --------- ------------------------- ---------- ----------------------------- --------- ----------------------- --------- ------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------