通过 npm 更改为使用引导程序答案

【问题标题】：Changing to using bootstrap via npm通过 npm 更改为使用引导程序
【发布时间】：2015-10-17 22:24:42
【问题描述】：

我正在开发一个当前使用引导程序的项目。然而，这是通过将引导文件加载到子目录中来完成的。我想转而使用 npm，因为这样可以更轻松地保持最新状态。

我们现有的 style 文件夹包括 bootstrap 和 source 作为子文件夹 + index.js 文件：

var ms = require('ms');
var join = require('path').join;
var less = require('transform')('less');
var express = require('express');
var app = express();

.............*other code*

app.get('/bootstrap.css', less(join(__dirname, 'source',
                                    process.env.COMPANY_ID + '-root.less')));
app.get('/print.css', less(join(__dirname, 'source',
                                process.env.COMPANY_ID + '-print.less')));

module.exports = app;

在源文件夹中，我们有许多 .less 文件，包括一个 company-root.less，它可以导入各种 less 文件：

@import "./bootstrap/bootstrap.less";    
@import "./variables/all.less";
@import "./variables/company.less";   
@import "./customcss.less";    
@import "./subnav.less";    
@import "./nav-list.less";

我已将引导程序添加到package.json 并运行npm install，因此在node_modules 文件夹中有引导程序，但无法让项目与新文件一起运行。我试过放

var $ = require('jQuery');
global.jQuery = $;
require('bootstrap');

进入index.js 这给了我一个错误：

TypeError: Cannot set property 'emulateTransitionEnd' of undefined
    at C:\Users\Dee\Documents\GitHub\MAPS\node_modules\bootstrap\js\transition.js:36:29

我已尝试将company-root.js 的第一行更改为：

@import (npm) "bootstrap";

或

@import "../../node_modules/bootstrap/less/bootstrap.less";

但这只会导致没有格式。

我花了三个小时在网上拖网，但没有任何进展。谁能帮帮我？

【问题讨论】：

标签： javascript twitter-bootstrap npm

【解决方案1】：

我也收到了这个错误。我正在开发一个需要 HTML 中的引导程序的小型演示，我试图使用 require(bootstrap) 将引导程序加载到 .js 文件中。

我从.js 文件中删除了require(bootstrap0。

我转到我的 HTML 并像这样将引导程序添加到 <head>：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

我的 .js 文件是这样的：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
global.jQuery = require('jquery');

运行我的项目，它运行良好。错误消失了。我知道这可能不是您想要的，但我想发布我的解决方案，以防其他人收到该错误消息。

【讨论】：

【解决方案2】：

我认为您必须使用类似的库 bootstrap-sass-loader 要么 bootstrap-webpack.

这在某些情况下有效，但不适用于所有 webpack 配置

global.jQuery = global.$ = require('jquery');
require('bootstrap');

【讨论】：