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

问题描述

问题1:

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

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?

问题2:

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

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

推荐答案

1. 使用CDN的要点是它更快 ，首先，因为它是分布式网络，但是其次，因为静态文件是被浏览器缓存的可能性很高，例如，用户的浏览器已经下载了您的站点使用的CDN的jquery库，因此该文件已被缓存，因此不会进行不必要的下载.话虽这么说，提供后备广告仍然是一个好主意.

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.

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

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.

想象一下以下项目结构:

Imagine the following project structure:

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

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

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>

这是最简单的方法，并且更正.css文件.但是最好在public/js/*.js文件中的某个位置包含这样的bootstrap.js文件:

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');

并且仅在实际需要bootstrap.js的那些javascript文件中包含此代码. 浏览器会为您包括此文件.

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.

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

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.

自从我写了这个答案以来已经过去了将近两年，并且已经有更新了.

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

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

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.

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

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');

对于css文件，webpack称为"加载器".他们允许您在js代码中编写此代码:

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');

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

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.

总结

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

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屋！