保险丝盒 - 为 JQuery、Bootstrap 和 ionicon 设置项目

Question

我正在尝试设置一个 Fuse-box 环境，以便能够将 JQuery、Boostrap 和 ionicon 包捆绑到两个文件中：

• static/assets/js/bundle.js
• 静态/资产/CSS/捆绑.css

我有两个问题：

1. 我的 JQuery 脚本不起作用。
2. CSSResourcePlugin 不生成任何资源文件，因此不会显示离子图标。

我的保险丝.js文件设置如下：

const fuse = FuseBox.init({
homeDir: 'src/',
output: 'static/$name.js',
plugins: [
[
SassPlugin({ importer: true }),
CSSResourcePlugin({
dist: 'static/assets/resources',
resolve: f => `assets/resources/${f}`
}),
CSSPlugin({
group: 'bundle.css',
outFile: `static/assets/css/bundle.css`
})
]
],
shim: {
jquery: {
source: 'node_modules/jquery/dist/jquery.js',
exports: 'jQuery'
}
}
});
fuse.dev({ httpServer: true, hmr: true, port: 3000 });
fuse.bundle('assets/js/bundle').instructions('>index.ts').watch().hmr();
fuse.run();

我的打字稿文件：

索引.ts

import 'tether';
import 'bootstrap';
import './ts/sliders';
import './app.scss';

./ts/sliders.ts

import * as $ from 'jquery';
import 'slick-carousel';
$(function() {
console.log('dede');
});

我的应用程序.scss文件：

@import './scss/custom.scss';
@import '~bootstrap/scss/bootstrap.scss';
@import '~ionicons/dist/scss/ionicons.scss';
@import '~slick-carousel/slick/slick.scss';
@import '~slick-carousel/slick/slick-theme.scss';

整个项目可在Github上找到： https://github.com/jezikk/fuse-box-test

你能帮我设置吗？

Answer 1

确保资源文件可访问(有时无法访问( 如果从引导导入实际dist会更容易。