node.js 通过 npm 安装 Twitter Bootstrap 的目的？

Purpose of installing Twitter Bootstrap through npm?

提问by James Fazio

Question 1:

问题 1：

What exactly is the purpose of installing Twitter Bootstrap through npm? I thought npm was meant for server side modules. Is it faster to serve the bootstrap files yourself than using a CDN?

通过 npm 安装 Twitter Bootstrap 的目的究竟是什么？我认为 npm 是用于服务器端模块的。自己提供引导文件是否比使用 CDN 更快？

Question 2:

问题2：

If I were to npm install Bootstrap, how would I point to the bootstrap.js and bootstrap.css files?

如果我要 npm install Bootstrap，我将如何指向 bootstrap.js 和 bootstrap.css 文件？

采纳答案by timetowonder

1. The point of using CDN is that it is faster, first of all, because it is a distributednetwork, but secondly, because the static files are being cached by the browsers and chances are high that, for example, the CDN's jquerylibrary that your site uses had already been downloaded by the user's browser, and therefore the file had been cached, and therefore no unnecessary download is taking place. That being said, it is still a good idea to provide a fallback.

   Now, the point of bootstrap's npm package

   is that it provides bootstrap's javascriptfile as a module. As has been mentioned above, this makes it possible to requireit using browserify, which is the most likely use case and, as I understand it, the main reason for bootstrap being published on npm.

2. How to use it

   Imagine the following project structure:

   project
   |-- node_modules
   |-- public
   |   |-- css
   |   |-- img
   |   |-- js
   |   |-- index.html
   |-- package.json
   
   

1. 使用 CDN 的重点是它更快，首先，因为它是一个分布式网络，其次，因为静态文件正在被浏览器缓存，并且很有可能，例如，jquery您站点的 CDN库用户的浏览器已经下载了使用，因此该文件已被缓存，因此不会发生不必要的下载。话虽如此，提供 fallback仍然是一个好主意。

   现在，bootstrap 的 npm 包的要点

   是它提供了 bootstrap 的javascript文件作为一个模块。如上所述，这使得它可以require使用browserify，这是最有可能的用例，据我了解，引导程序在 npm 上发布的主要原因。

2. 如何使用它

   想象以下项目结构：

   project
   |-- node_modules
   |-- public
   |   |-- css
   |   |-- img
   |   |-- js
   |   |-- index.html
   |-- package.json
   
   

In your index.htmlyou can reference both cssand jsfiles like this:

在您的文件中，index.html您可以同时引用css和js文件，如下所示：

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Which is the simplest way, and correct for the .cssfiles. But it is much better to include the bootstrap.jsfile like this somewhere in your public/js/*.jsfiles:

这是最简单的方法，对.css文件来说是正确的。但是最好将这样的bootstrap.js文件包含在文件中的某处public/js/*.js：

var bootstrap = require('bootstrap');

And you include this code only in those javascriptfiles where you actually need bootstrap.js. Browserifytakes care of including this file for you.

并且您仅在javascript您实际需要的那些文件中包含此代码bootstrap.js。Browserify负责为您包含此文件。

Now, the drawback is that you now have your front-end files as node_modulesdependencies, and the node_modulesfolder is usually not checked in with git. I think this is the most controversial part, with many opinionsand solutions.

现在，缺点是您现在将前端文件作为node_modules依赖项，并且该node_modules文件夹通常不会使用git. 我认为这是最有争议的部分，有很多意见和解决方案。

---

---

UPDATE March 2017

2017 年 3 月更新

Almost two years have passed since I wrote this answer and an update is in place.

自从我写下这个答案已经快两年了，更新已经到位。

Now the generally accepted way is to use a bundlerlike webpack(or another bundler of choice) to bundle all your assets in a build step.

现在普遍接受的方法是使用像webpack这样的捆绑器（或其他选择的捆绑器）在构建步骤中捆绑所有资产。

Firstly, it allows you to use commonjs syntax just like browserify, so to include bootstrap js code in your project you do the same:

首先，它允许您像 browserify 一样使用 commonjs 语法，因此要在您的项目中包含 bootstrap js 代码，您也可以这样做：

const bootstrap = require('bootstrap');

As for the cssfiles, webpack has so called "loaders". They allow you write this in your js code:

至于css文件，webpack 有所谓的“加载器”。他们允许你在你的 js 代码中写这个：

require('bootstrap/dist/css/bootstrap.css');

and the css files will be "magically" included in your build. They will be dynamically added as <style />tags when your app runs, but you can configure webpack to export them as a separate cssfile. You can read more about that in webpack's documentation.

并且 css 文件将“神奇地”包含在您的构建中。它们将<style />在您的应用程序运行时动态添加为标签，但您可以配置 webpack 将它们导出为单独的css文件。您可以在 webpack 的文档中阅读更多相关信息。

In conclusion.

综上所述。

1. You should "bundle" your app code with a bundler
2. You shouldn't commit neither node_modulesnor the dynamically built files to git. You can add a buildscript to npm which should be used to deploy files on server. Anyway, this can be done in different ways depending on your preferred build process.

1. 您应该使用捆绑程序“捆绑”您的应用程序代码
2. 您不应node_modules将动态构建的文件或动态构建的文件提交给 git。您可以build向 npm添加一个脚本，该脚本应该用于在服务器上部署文件。无论如何，这可以根据您首选的构建过程以不同的方式完成。

回答by Augusto Goncalves

If you NPM those modules you can serve them using static redirect.

如果您 NPM 这些模块，您可以使用静态重定向为它们提供服务。

First install the packages:

首先安装软件包：

npm install jquery
npm install bootstrap

Then on the server.js:

然后在 server.js 上：

var express = require('express');
var app = express();

// prepare server
app.use('/api', api); // redirect API calls
app.use('/', express.static(__dirname + '/www')); // redirect root
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

Then, finally, at the .html:

然后，最后，在 .html：

<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

I would not serve pages directly from the folder where your server.js file is (which is usually the same as node_modules) as proposed by timetowonder, that way people can access your server.js file.

我不会直接从 timetowonder建议的server.js 文件所在的文件夹（通常与 node_modules 相同）提供页面，这样人们就可以访问您的 server.js 文件。

Of course you can simply download and copy & paste on your folder, but with NPM you can simply update when needed... easier, I think.

当然，您可以简单地下载并复制并粘贴到您的文件夹中，但是使用 NPM，您可以在需要时简单地更新……我认为更容易。

回答by mfrachet

Answer 1:

答案 1：

• Downloading bootstrap through npm (or bower) permits you to gain some latency time. Instead of getting a remote resource, you get a local one, it's quicker, except if you use a cdn (check below answer)

• "npm" was originally to get Node Module, but with the essort of the Javascript language (and the advent of browserify), it has a bit grown up. In fact, you can even download AngularJS on npm, that is not a server side framework. Browserify permits you to use AMD/RequireJS/CommonJS on client side so node modules can be used on client side.

• 通过 npm（或 bower）下载引导程序允许您获得一些延迟时间。不是获取远程资源，而是获取本地资源，速度更快，除非您使用 cdn（请查看下面的答案）

• “npm”原本是为了获取Node Module，但是随着Javascript语言的essort（以及browserify的出现），它有点长大了。事实上，你甚至可以在 npm 上下载 AngularJS，那不是服务器端框架。Browserify 允许您在客户端使用 AMD/RequireJS/CommonJS，因此可以在客户端使用节点模块。

Answer 2:

答案 2：

If you npm install bootstrap (if you dont use a particular grunt or gulp file to move to a dist folder), your bootstrap will be located in "./node_modules/bootstrap/bootstrap.min.css" if I m not wrong.

如果你 npm install bootstrap（如果你不使用特定的 grunt 或 gulp 文件移动到 dist 文件夹），你的引导程序将位于“./node_modules/bootstrap/bootstrap.min.css”，如果我没记错的话。

回答by 7affer

1. Use npm/bower to install bootstrap if you want to recompile it/change less files/test. With grunt it would be easier to do this, as shown on http://getbootstrap.com/getting-started/#grunt. If you only want to add precompiled libraries feel free to manually include files to project.

2. No, you have to do this by yourself or use separate grunt tool. For example 'grunt-contrib-concat' How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)

1. 如果要重新编译/更改较少的文件/测试，请使用 npm/bower 安装引导程序。使用 grunt 会更容易做到这一点，如http://getbootstrap.com/getting-started/#grunt所示。如果您只想添加预编译库，请随意手动将文件包含到项目中。

2. 不，您必须自己完成此操作或使用单独的 grunt 工具。例如 'grunt-contrib-concat'如何使用 Grunt.js (0.3.x) 连接和缩小多个 CSS 和 JavaScript 文件