SailsJS在视图中包含node_module

Question

我使用sails（http://sailsjs.com）开发一个小平台。文档之后一切顺利。但是对这个javascript框架世界和npm等新手来说，我一直有麻烦，包括其他node_modules，并在.ejs视图中使用它们......我知道并不是所有的模块都包含在视图中，但怎么可以我设法包括一些？ 试图使用https://www.npmjs.com/package/vue-slider-component 非常感谢您提前抱歉，如果这个错误显然是愚蠢的。

Answer 1

你的困惑是可以理解的。问题在于，直到最近，安装在node_modules中的东西才完全用于后端的代码;即您的Sails.js控制器操作，模型等。毕竟，node_modules文件夹右侧有单词“节点”，它创建用于NPM（节点程序包管理器）以帮助组织节点（即服务器端 JavaScript）文件！

尽管很多前端插件已发布在Bower上，但更新的框架（如Angular 2和Vue）经常会将它们的插件发布到NPM上，因为它减少了应用程序的移动部件数量。问题是，如果您尝试在服务器呈现的.ejs视图中尝试require('vue-slider-component')，那么服务器（即Sails.js）将尝试在呈现视图之前加载并运行该代码，其中您真正想要的是该插件在浏览器中运行。

长期的解决方案是使用诸如Browserify或Webpack之类的东西将所有前端JavaScript文件编译为“包”。因此，举例来说，如果你有一个像assets/js/my-vue-app.js一个文件，其中包括行：

import vueSlider from 'vue-slider-component/src/vue2-slider.vue' 

然后Browserify会看到那行，加载了该vue2-slider.vue文件，将其添加到my-vue-app.js文件的顶部，执行一些其他的魔术，将它与您的其他前端.js文件结合起来并输出一个文件，如browserified.js，然后您将通过<script src="/path/to/browserified.js">包含在您的HTML中。

由于新的Sails应用程序使用Grunt将这些<script>标记组织并注入到您的视图中，因此您可能会有点困惑，因为您将如何获得像Browserify或Webpack这样的工具来处理Sails。对于Sails 1.0，使用Webpack代替Grunt有seed project。对于Sails v0.12.x，你将不得不谷歌搜索一些使用Sails的Broswerify或Webpack的例子。

一个短期的解决方案，并且从长远来看，可能不那么容易维护，是对minified vue-js-slider component的内容保存到你的资产的文件夹（例如，作为assets/js/vue-slider-component.js），它与<script src="/js/vue-slider-component.js">和访问它添加到您的HTML你代码为window['vue-slider-component']。