Bootstrap-sass jquery 错误

Question

在花了几个小时试图解决我的问题后，我来到这里寻求帮助。

我正在尝试通过 webpack 和 gulp 将 Bootstrap javascript 加载到我的项目中，但我收到以下 browser 错误.

这是我的 webpack.config 的样子：

module.exports = {
    output: {
        filename: "bundle.js",
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: [
            "",
            ".webpack.js",
            ".web.js",
            ".ts",
            ".tsx",
            ".js",
            ".scss"
        ]
    },
    module: {
        loaders: [
            { // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
                test: /\.tsx?$/,
                loader: "ts-loader"
            }
        ]
    }

};

它完美地加载了 jQuery，因为我可以使用它，但似乎 bootstrap-sass 看不到它。

这是我的 script.ts 的样子：

import * as $ from "jquery";
let bootstrap = require("../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js");

最后是我的 gulpfile.ts:

gulp.task("ts", () => {
    gulp.src(["public/scripts/*.ts"]).
        pipe(webpack(require("./webpack.config.ts"))).
        pipe(uglify()).
        pipe(gulp.dest("public/scripts"));
});

我很沮丧，这是行不通的。我知道我可以使用 bootstrap-sass-loader，但我更喜欢通过 gulp.

编译我的 sass 文件

Answer 1

哟呵呵呵，终于找到答案了。为了让 bootstrap-sass 知道 jquery 我必须通过这个 loader.

导入 jquery

通过 npm 安装加载程序：

npm install imports-loader

然后将此行添加到您的 webpack.config.js:

{test: /bootstrap-sass\/assets\/javascripts\//, loader: "imports?jQuery=jquery"},

希望对您有所帮助:)

Bootstrap-sass jquery 错误

Bootstrap-sass jquery error

jquery

typescript

bootstrap-sass

gulp

webpack