通过NPM获取Bootstrap并将其包含到HTML中。

26 浏览
0 Comments

通过NPM获取Bootstrap并将其包含到HTML中。

通常我使用CDN（或者nuget）来将Bootstrap或其他客户端库包含到我的网站中。

最近我了解了NPM/Bower和其他现代的包管理工具，并决定尝试一下。

在浏览和调查了一段时间后，我现在完全迷惑了，如何像以前那样仅下载和包含Bootstrap的分发css/js文件到我的页面中...

第一次尝试，我使用NPM安装了Bootstrap，它将整个Bootstrap和所有源代码/模块等下载到了node_modules目录下...好吧，我在node_modules/Bootstrap/dist文件夹中找到了分发文件。

现在有一些问题：

  • 我应该将node_modules/Bootstrap/dist中的css和js文件链接到我的网站吗？
  • 如果是的，我应该将整个node_modules文件夹与网站一起部署吗？
  • 如果不是，并且我知道npm包是模块化的，应该通过require("bootstrap")进行包含，那么还有很多其他问题

    • require("bootstrap")是Node.js还是其他JavaScript函数？
    • 为了使require("bootstrap")工作，我应该包含其他Node.js包或JavaScript文件吗？
    • 在HTML中的脚本标签中应该在哪里写require("bootstrap")？是创建一些JavaScript文件并包含它还是怎样？

第二次尝试，好吧，我明白了，NPM可能是用于Node.js服务器端的包管理工具，然后我了解了Bower...但是它又将相同的文件下载到了另一个文件夹bower_components中，同样还有同样的问题...

0

1 答案

0 Comments

问题的原因是希望通过NPM获取Bootstrap并将其包含到HTML中，但是使用Bower安装Bootstrap会下载所有的源代码，而不仅仅是dist文件夹中的内容。解决方法是修改Bower的默认组件文件夹的目标路径，并在HTML中引用dist文件夹中的CSS和JS。如果希望在客户端使用模块化，需要使用Webpack。最后，提到了对Angular 2是否会在CDN上提供的疑问。

0