Sér*_*eis 1 npm gruntjs sails.js vuejs2
我正在使用sails（http://sailsjs.com）开发一个小平台。遵循文档，一切顺利。但是对于这个javascript框架世界和npm等而言，我是一个新手，我一直遇到麻烦，包括其他node_modules并在.ejs视图中使用它们。设法包括一些？尝试使用https://www.npmjs.com/package/vue-slider-component 预先感谢您，如果此错误只是很愚蠢的事情，我们深表歉意。
您的困惑是可以理解的。问题在于，直到最近，安装的东西node_modules仅用于后端代码。就是说，您的Sails.js控制器动作，模型等。毕竟，该node_modules文件夹中的单词“ Node”正确，并且创建该文件夹是为了与NPM（节点程序包管理器）一起使用，以帮助组织节点（即服务器）侧 JavaScript）文件！
尽管许多前端插件已经（并且仍然）在Bower上发布，但较新的框架（如Angular 2和Vue）经常将其插件发布到NPM，因为它减少了应用程序的移动部件数量。问题是，如果您尝试require('vue-slider-component')在服务器渲染的.ejs视图中运行，则服务器（即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 的种子项目。对于Sails v0.12.x，您必须在Google周围找到一些将Broswerify或Webpack与Sails结合使用的示例。
短期的解决方案（可能从长远来看不太可能维护）是将缩小的vue-js-slider组件的内容保存到资产文件夹中（例如assets/js/vue-slider-component.js），将其添加到HTML中<script src="/js/vue-slider-component.js">并在您的HTML文件中访问编码为window['vue-slider-component']。