Question

我试图设置一个Fuse-box环境，以便能够将JQuery，Boostrap和ionicons包捆绑成两个文件：

静态/资产/ JS / bundle.js
静态/资产/ CSS / bundle.css

我有两个问题：

我的JQuery脚本无效。
CSSResourcePlugin不会生成任何资源文件，因此不会显示离子。

我的fuse.js文件设置如下：

＆＃13;

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();

＆＃13;

我的打字稿文件：

index.ts

＆＃13;

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

＆＃13;

./ TS / sliders.ts

＆＃13;

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

＆＃13;

我的app.scss文件：

＆＃13;

@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';

＆＃13;

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

你可以帮我设置一下吗？

Answer 1

确保资源文件可以访问（有时它们不可访问）如果从引导程序导入实际dist，则会更容易。

Fuse-box - 为JQuery，Bootstrap和ionicons设置项目

1 个答案: