通过 npm 安装 Twitter Bootstrap 的目的是什么? [英] Purpose of installing Twitter Bootstrap through npm?

问题描述

问题 1:

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

问题 2:

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

解决方案

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

   现在是 bootstrap 的 npm 包的重点

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

2. 如何使用

   设想以下项目结构:

   <前>项目|-- 节点模块|-- 公开||-- css||-- 图片||-- js||-- index.html|-- package.json

在您的 index.html 中，您可以像这样引用 css 和 js 文件:

<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

这是最简单的方法，并且适用于 .css 文件.但是最好在 public/js/*.js 文件中的某处包含这样的 bootstrap.js 文件:

var bootstrap = require('bootstrap');

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

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

<小时>

2017 年 3 月更新

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

现在普遍接受的方法是使用 bundler 像 webpack(或另一个选择的捆绑器)在构建步骤中捆绑所有资产.

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

const bootstrap = require('bootstrap');

至于 css 文件，webpack 有所谓的loaders".他们允许你在你的 js 代码中写这个:

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

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

总结.

1. 您应该使用捆绑程序捆绑"您的应用代码
2. 您不应将 node_modules 或动态构建的文件提交到 git.您可以向 npm 添加一个 build 脚本，该脚本应该用于在服务器上部署文件.无论如何，这可以通过不同的方式完成，具体取决于您喜欢的构建过程.

Question 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?

Question 2:

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

解决方案

1. The point of using CDN is that it is faster, first of all, because it is a distributed network, but secondly, because the static files are being cached by the browsers and chances are high that, for example, the CDN's jquery library 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 javascript file as a module. As has been mentioned above, this makes it possible to require it 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
   
   

In your index.html you can reference both css and js files like this:

<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 .css files. But it is much better to include the bootstrap.js file like this somewhere in your public/js/*.js files:

var bootstrap = require('bootstrap');

And you include this code only in those javascript files where you actually need bootstrap.js. Browserify takes care of including this file for you.

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

---

UPDATE March 2017

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 bundler like webpack (or another bundler of choice) to bundle all your assets in a build step.

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

const bootstrap = require('bootstrap');

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

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 css file. You can read more about that in webpack's documentation.

In conclusion.

1. You should "bundle" your app code with a bundler
2. You shouldn't commit neither node_modules nor the dynamically built files to git. You can add a build script 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.

这篇关于通过 npm 安装 Twitter Bootstrap 的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！