简介
aurelia-loader-fusebox 是一个由 FuseBox 提供的针对 Aurelia 框架的加载器，它可以让我们在使用 Aurelia 进行前端开发时更加方便地使用 FuseBox 进行打包与构建。
安装
aurelia-loader-fusebox 可以通过 npm 获得：
npm install aurelia-loader-fusebox --save-dev
使用步骤
1. 在 aurelia.json 中设置配置
在项目中的 aurelia.json 文件中添加以下配置：
-- -------------------- ---- -------
-
--------- -
------- ----------
--------------- -------------------
---------------- -
-------
------
-------
-------
-------
----------------
--------
-------------------------
-------------------------
----------------
------------
---------
---------------
--------------------------
----------------------------
----------------------
-----------------------
-------------------------
-----------------------
--------------------
---------
----------
-----------
--
---------- -
-
------- --------------------------
---------- -
----------------- ---
--------------------- -----
------------------ ----
-
-
-
-
-2. 创建 FuseBox 配置文件
在项目根目录创建 fuse.js 文件，并添加以下配置：
-- -------------------- ---- -------
----- - ------- - - --------------------
----- ---- - --------------
-------- ------
------- ----------------
-------- -
-
-----------------------------------
-
--------- ------
--
--
--
---
----
--------------
---------------------------
---------
-----------3. 引入 aurelia-bootstrapper 和 aurelia-framework
在入口文件 main.ts 中引入 aurelia-bootstrapper 和 aurelia-framework：
import "aurelia-bootstrapper";
import { Aurelia } from "aurelia-framework";
const au = new Aurelia();
au.app({ host: document.querySelector("body"), component: startComponent });
au.start();4. 启动项目
使用以下命令启动项目：
npm run start
此时，aurelia-loader-fusebox 就会自动帮我们进行打包与构建。
示例代码
以下是一个简单的示例代码：
main.ts：
-- -------------------- ---- ------- ------ ----------------------- ------ - ------- - ---- -------------------- ------ - -------------- - ---- -------- ----- -- - --- ---------- -------- ----- ------------------------------- ---------- -------------- --- -----------
app.ts：
-- -------------------- ---- -------
------ - --------- ------ - ---- --------------------
----------------
------ ----- -------------- -
------------------- --- ------------ --
--------- -------- -------
---------- -
---------------------------------
-
-app.html：
<template>
<h1>${message}</h1>
</template>结语
通过本文的介绍，相信大家已经了解了如何使用 aurelia-loader-fusebox 进行前端开发，这将大大提高我们的工作效率。希望大家在日常的开发中能够加以利用，提高工作效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567fa81e8991b448e41f2