使用 jspm 加载 font-awesome

Question

我开始研究 jspm 并偶然发现了这个问题。 我认真地在谷歌上搜索，但找不到简单的答案或例子。

你如何加载 CSS 和它附带的字体？

我试图做<script>System.import('font-awesome/css/font-awesome.css')</script>但它不起作用。 它将 .js 扩展名添加到 url，我得到一个 404。像这样： font-awesome.css.js 我试过import 'font-awesome/css/font-awesome.css'; 这也不起作用。

那么，对于包含 css 和字体的 jspm 包，您如何使它们可用于我的应用程序？

那么字体文件呢？ 我必须手动移动它们还是让 gulp 来做？ 你如何在你的 jspm 工作流程中处理这个问题？

谢谢

编辑

根据 Joy 给出的答案，我只想澄清我想要的。 调查 jspm 我读到它动态加载模块的能力（又名 es6 模块加载）。 我相信，这就是 jspm 的症结所在。 我不想每次更改文件时都打包！ 我想在开发结束时将应用程序上传到服务器之前捆绑一次。 在开发周期中，我希望 jspm 动态加载我的 js 模块和资产。 否则，如果需要捆绑，我可以使用已经可用的（和更快的捆绑解决方案），如 Browseryfy、Webpack。 所以在每次文件更改时捆绑不是解决方案。 使用 Systemjs 和 HTTP/2，我们根本不需要捆绑。 我想，这就是 jspm 的全部内容。

那么有人可以告诉我是否可以像加载 js 模块一样使用 jspm 动态加载资产（css、字体、图像）？ 这里的关键词是动态的，没有先捆绑。 如果是 - 如何？

Answer 1

在使用font-awesome包之前，您需要CSS loading plugin和CSS build support 。

$ jspm install css
$ jspm install npm:clean-css --dev
$ jspm install font-awesome

并创建包含以下内容的main.js文件：

导入 'font-awesome/css/font-awesome.min.css！';

到目前为止，您有两个选项可以使它们可用。

(1) index.html文件中的第一个解决方案是

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
        System.import('main');
    </script>

    <i class="fa fa-camera-retro"></i> fa-camera-retro
</body>
</html>

您不需要在这里捆绑所有 js 文件。 仅导入main.js文件。

(2) 第二种解决方案是使用jspm bundle-sfx

您可以通过以下方式构建build.js

$ jspm bundle-sfx main.js ./build.js

或gulp自动构建捆绑文件。

这是一个简单的gulpfile.js示例：

const gulp = require('gulp');
const gulp_jspm = require('gulp-jspm');

const paths = {
    main: './main.js',
    dest: './dest/'
};

gulp.task('scripts', function () {
    gulp.src(paths.main)
      .pipe(gulp_jspm({
          selfExecutingBundle: true
      }))
      .pipe(gulp.dest(paths.dest));
});

function reportChange(event){  
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
}

gulp.task('watch', function () {
    gulp.watch([paths.main], ['scripts']).on('change', reportChange);
});

gulp.task('default', ['watch', 'scripts']);

现在，创建一个index.html文件并可以通过httpster测试它

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="./dest/main.bundle.js"></script>

    <i class="fa fa-camera-retro"></i> fa-camera-retro
</body>
</html>

检查jspm-cli/docs/plugins.md以获取更多信息。

Answer 2

用css插件加载它。

jspm install css
jspm install fontawsome=github:FortAwesome/Font-Awesome

在js文件中

import fontawsome from 'fontawsome/css/font-awesome.css!';

使用 jspm 加载 font-awesome

问题描述

2 个解决方案

解决方案1
2 2015-11-19 07:10:11

解决方案2
0 2016-04-12 11:38:00

使用 jspm 加载 font-awesome

问题描述

2 个解决方案

解决方案1 2 2015-11-19 07:10:11

解决方案2 0 2016-04-12 11:38:00

解决方案1
2 2015-11-19 07:10:11

解决方案2
0 2016-04-12 11:38:00