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']。