如何使用npm加载引导程序？

我有一个使用jquery的npm项目。

var $ = require('jquery');

我还有一个引用bootstrap的索引html文件。

现在我需要单独加载jquery for bootstrap，因为它取决于它吗？ 我最近使用jqueryify而不是jquery ，我不需要单独加载。

任何人都可以推荐一个加载模式的bootstrap用于require吗？

Answer 1

Bootstrap现在是引导程序员支持的节点包。

https://www.npmjs.org/package/bootstrap

这意味着您现在可以在代码中需要引导程序。 所以。

npm install bootstrap --save

npm install jquery --save

foo.js

 var $ = require('jquery'); window.$ = $; require('bootstrap'); 

Answer 2

如果您在使用require('jquery')遇到一些麻烦，可以采用更简单的方法。 只需重定向节点模块文件夹（不使用任何require() ）。

 app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap 

在您的观点上，只需使用：

Answer 3

您可以尝试将其分配给全局jquery属性。

 global.jQuery = require('jquery'); 

Answer 4

 //install expose-loader npm install jquery --save //Installing jquery and saving to package.Json npm install bootstrap --save//Installing boostrap and saving to package.Json npm install expose-loader --save-dev//Installing expose-loader and saving to package.json // webpack module: { rules: [ { test: require.resolve('jquery'), loader: 'expose-loader?jQuery!expose-loader?$' } ]} // javascript file var $ = require("expose-loader?$!jquery"); require('bootstrap'); require('jquery.easing'); 

Answer 5

 yarn add bootstrap-sass yarn add jquery 

对于样式，我使用gulp sass，需要包含Paths for bootstrap

 @import "bootstrap-sprockets"; @import "bootstrap"; var sass = require('gulp-sass'); pipe(sass({includePaths: ['node_modules/bootstrap-sass/assets/stylesheets']}).on('error', sass.logError)) 

对于JavaScript，我将jquery分配给window.jQuery，因为需要bootstrap-sass：

 window.jQuery = require('jquery'); require('bootstrap-sass'); 

Answer 6

我正在使用Laravel Mix（Webpack），因此我必须将此别名添加到webpack.mix.js ：

 mix.webpackConfig({ ... resolve: { ... alias: { "bootstrap": path.resolve(__dirname, "node_modules/bootstrap/dist/js/bootstrap.min.js"), } }, }); 

我的package.json在devDependencies中有"bootstrap": "^4.0.0", 。

然后在我的javascript文件中查看我的视图，我使用：

 var $ = require('jquery'); window.$ = $; require('bootstrap'); 

https://getbootstrap.com/docs/4.0/getting-started/download/#npm也有帮助。