简介
jspm-aurelia-bundler 是一个用于将 aurelia 应用打包的 npm 包。它集成了 jspm 和 aurelia-bundler，可以很方便的将 aurelia 应用打包成一个单独的 js 文件，大大提高了应用的加载速度。
安装与配置
安装 jspm-aurelia-bundler
npm install jspm-aurelia-bundler --save-dev
安装 jspm 和 aurelia-bundler
npm install jspm aurelia-bundler --save-dev
配置 jspm
jspm init可以通过命令行或者命令行交互方式来进行配置，其中有一些注意事项：
- 需要选择 SystemJS Loader。
- SystemJS 配置文件路径需要设置为 config.js。
- 选择 Transpiler，根据自己的需求选择 ES5 或 ES6。
配置 aurelia-bundler
在项目根目录下创建 bundler-config.js 文件，填写以下内容：
-- -------------------- ---- ------- -------------- - - ------ ----- -------- ---- -------------- ---------------- ---------- - ----------------- - ----------- - ------------ ----------------- ---------------- ----------------- --------------- -- ----------- - ------------------------------ -- ---------- - --------- ----- --------- ---- - - - --
展开代码这里的配置文件是将 app-build 作为入口文件，将所有 js、html、css、json 和 svg 文件都打包进来，并且开启了压缩和文件注入功能。
配置打包脚本
在 package.json 文件中找到 scripts 属性，加入以下命令：
"bundle": "aurelia-bundler --force --config bundler-config.js"
这里命令是调用 aurelia-bundler 将应用打包到 dist 文件夹。
使用方法
在项目根目录下运行以下命令：
npm run bundle这个命令会使用 bundler-config.js 中的配置文件生成对应的打包文件。
在 index.html 页面中引用打包文件：
<script src="dist/app-build.js"></script>
这里引用的是打包生成的 app-build.js 文件。
示例代码
一个简单的 aurelia 应用示例代码：
<template> <h1>Hello, World!</h1> </template>
export class App { constructor() { this.message = 'Hello, World!'; } }
-- -------------------- ---- ------- ------ - ------- - ---- -------------------- ------ -------- ------------------ - ----------- ------------------------ ---------------------- ----------------------- -- ------------------- -展开代码
注：以上示例代码未经过打包处理。在打包后引用打包文件即可运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/83635
