SailsJS在视图中包含NODE_MODULE [英] SailsJS Include node_module in view

问题描述

我正在使用SAILS(http://sailsjs.com)开发一个小平台。按照文档说明，一切都很顺利。但是作为javascript框架世界和NPM等领域的新手，我在包含其他node_module并在.ejs视图中使用它们时遇到了麻烦…… 我知道不是所有的模块都要包含在视图中，但是我怎样才能包含一些模块呢？ 正在尝试使用https://www.npmjs.com/package/vue-slider-component 预先感谢您，如果此错误完全是愚蠢的，我深表歉意。

推荐答案

您的念力可以理解。问题是，直到最近，安装在node_modules中的内容仅用于后端代码；即您的Sails.js控制器操作、模型等。毕竟，node_modules文件夹中有"Node"一词，它是为与NPM(节点包管理器)一起使用而创建的，以帮助组织节点(即服务器端 虽然许多前端插件曾经(现在仍然)发布在Bower上，但像ANGLING 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一起工作可能会让人感到困惑。对于Sails1.0，有一个seed project表示使用webpack而不是Grunt。对于SAILS v0.12.x，您必须搜索一下才能找到一些使用Broswerify或webpack处理SAILS的示例。

短期解决方案(从长远来看可能不太容易维护)是将minified vue-js-slider component的内容保存到您的资产文件夹中(例如assets/js/vue-slider-component.js)，使用<script src="/js/vue-slider-component.js">将其添加到HTML中，然后在代码中以window['vue-slider-component']的形式访问它。

这篇关于SailsJS在视图中包含NODE_MODULE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！