如何包含位于node_modules文件夹内的脚本? [英] How to include scripts located inside the node_modules folder?
问题描述
我有一个关于将node_modules包含到HTML网站中的最佳做法的问题.
想象一下，我的node_modules文件夹中有Bootstrap.现在，对于网站的正式版，我将如何包含node_modules文件夹中的Bootstrap脚本和CSS文件?将Bootstrap保留在该文件夹中并执行以下操作是否有意义?
<script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script>
还是我必须向gulp文件中添加规则，然后将这些文件复制到dist文件夹中?还是最好让gulp以某种方式从我的HTML文件中完全删除本地引导程序，然后将其替换为CDN版本?
通常，您不想向外界公开任何内部路径来了解服务器的结构.可以做的是在服务器中建立一个/scripts静态路由，该路由从它们恰好位于的目录中获取文件.因此，如果文件位于"./node_modules/bootstrap/dist/"中.然后，页面中的脚本标签如下所示:
<script src="/scripts/bootstrap.min.js"></script>
如果将express与nodejs一起使用，那么静态路由就这么简单:
app.use('/scripts', express.static(__dirname + '/node_modules/bootstrap/dist/'));
然后，来自/scripts/xxx.js的所有浏览器请求都将自动从位于__dirname + /node_modules/bootstrap/dist/xxx.js的dist目录中获取.
注意:较新版本的NPM会将更多内容放在顶层，而不是嵌套得太深，因此，如果您使用较新版本的NPM，则路径名将不同于OP的问题和当前答案中指示的名称. .但是，概念仍然相同.您可以找到文件在服务器驱动器上的物理位置，并用express.static()创建app.use()以创建这些文件的伪路径，这样就不会向客户端公开实际的服务器文件系统组织. /p>
如果您不想创建这样的静态路由，则最好将公共脚本复制到Web服务器确实将其视为/scripts的路径或您想要的任何顶级名称使用.通常，您可以将此复制作为构建/部署过程的一部分.
如果您只想在目录中公开一个特定文件，而不是在该目录中找到所有文件，那么您可以手动为每个文件创建单独的路由，而不用使用express.static()，例如:
<script src="/bootstrap.min.js"></script>
以及用于为此创建路线的代码
app.get('/bootstrap.min.js', function(req, res) {
res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});
或者，如果您仍然想使用/scripts描绘脚本的路由，则可以执行以下操作:
<script src="/scripts/bootstrap.min.js"></script>
以及用于为此创建路线的代码
app.get('/scripts/bootstrap.min.js', function(req, res) {
res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});
I have a question concerning best practice for including node_modules into a HTML website.
Imagine I have Bootstrap inside my node_modules folder. Now for the production version of the website, how would I include the Bootstrap script and CSS files located inside the node_modules folder? Does it make sense to leave Bootstrap inside that folder and do something like the following?
<script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script>
Or would I have to add rules to my gulp file which then copy those files into my dist folder? Or would it be best to let gulp somehow completely remove the local bootstrap from my HTML file and replace it with the CDN version?
Usually, you don't want to expose any of your internal paths for how your server is structured to the outside world. What you can is make a /scripts static route in your server that fetches its files from whatever directory they happen to reside in. So, if your files are in "./node_modules/bootstrap/dist/". Then, the script tag in your pages just looks like this:
<script src="/scripts/bootstrap.min.js"></script>
If you were using express with nodejs, a static route is as simple as this:
app.use('/scripts', express.static(__dirname + '/node_modules/bootstrap/dist/'));
Then, any browser requests from /scripts/xxx.js will automatically be fetched from your dist directory at __dirname + /node_modules/bootstrap/dist/xxx.js.
Note: Newer versions of NPM put more things at the top level, not nested so deep so if you are using a newer version of NPM, then the path names will be different than indicated in the OP's question and in the current answer. But, the concept is still the same. You find out where the files are physically located on your server drive and you make an app.use() with express.static() to make a pseudo-path to those files so you aren't exposing the actual server file system organization to the client.
If you don't want to make a static route like this, then you're probably better off just copying the public scripts to a path that your web server does treat as /scripts or whatever top level designation you want to use. Usually, you can make this copying part of your build/deployment process.
If you want to make just one particular file public in a directory and not everything found in that directory with it, then you can manually create individual routes for each file rather than use express.static() such as:
<script src="/bootstrap.min.js"></script>
And the code to create a route for that
app.get('/bootstrap.min.js', function(req, res) {
res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});
Or, if you want to still delineate routes for scripts with /scripts, you could do this:
<script src="/scripts/bootstrap.min.js"></script>
And the code to create a route for that
app.get('/scripts/bootstrap.min.js', function(req, res) {
res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});
这篇关于如何包含位于node_modules文件夹内的脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
