Question

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

如何加载随附的CSS和字体？

我尝试<script>System.import('font-awesome/css/font-awesome.css')</script>，但它不起作用。它为网址添加了.js扩展名，我得到了404.像这样：font-awesome.css.js 我尝试了import 'font-awesome/css/font-awesome.css';，但也无效。

因此，对于包含css和字体的jspm软件包，如何将它们提供给我的应用程序？

那么字体文件呢？我是否必须手动移动它们或获得吞咽它？你如何在jspm工作流程中处理这个问题？

由于

修改

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

有人能告诉我是否可能使用jspm动态加载资源（css，fonts，images），就像它加载js模块一样？这里的关键词是动态的，不先捆绑。如果是 - 怎么样？

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文件：

import'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 个答案: