使用 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