我正在使用sails(http://sailsjs.com) 开发一个小平台。一切都按照文档进行。但是对于这个 javascript 框架世界和 npm 等来说是新手，我在包含其他 node_modules 并在 .ejs 视图中使用它们时遇到了麻烦...... 我知道并非所有模块都包含在视图中，但我怎样才能设法包含一些？ 尝试使用https://www.npmjs.com/package/vue-slider-component 提前感谢您，如果这个错误很愚蠢，我们深表歉意。
【问题讨论】：
标签： npm gruntjs sails.js vuejs2
您的困惑是可以理解的。问题是，直到最近，node_modules 中安装的东西仅用于 后端 代码；也就是说，您的 Sails.js 控制器操作、模型等。毕竟，node_modules 文件夹中有“Node”一词，它是为与 NPM 一起使用而创建的（Node包管理器）来帮助组织节点（即服务器端 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，有一个 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'] 的身份访问它。
【讨论】：