【问题标题】:SailsJS Include node_module in viewSailsJS 在视图中包含 node_module
【发布时间】:2017-04-03 13:58:07
【问题描述】:

我正在使用sails(http://sailsjs.com) 开发一个小平台。一切都按照文档进行。但是对于这个 javascript 框架世界和 npm 等来说是新手,我在包含其他 node_modules 并在 .ejs 视图中使用它们时遇到了麻烦...... 我知道并非所有模块都包含在视图中,但我怎样才能设法包含一些? 尝试使用https://www.npmjs.com/package/vue-slider-component 提前感谢您,如果这个错误很愚蠢,我们深表歉意。

【问题讨论】:

    标签: npm gruntjs sails.js vuejs2


    【解决方案1】:

    您的困惑是可以理解的。问题是,直到最近,node_modules 中安装的东西仅用于 后端 代码;也就是说,您的 Sails.js 控制器操作、模型等。毕竟,node_modules 文件夹中有“Node”一词,它是为与 NPM 一起使用而创建的(Node包管理器)来帮助组织节点(即服务器端 JavaScript)文件!

    虽然许多前端插件已经(并且仍然)在Bower 上发布,但 Angular 2 和 Vue 等较新的框架经常将其插件发布到 NPM,因为它减少了应用程序的移动部件数量。问题是,如果您尝试在服务器渲染的 .ejs 视图中使用 require('vue-slider-component')服务器(即 Sails.js)将在渲染视图之前尝试加载并运行该代码,您真正想要的是让该插件在浏览器中运行

    长期的解决方案是使用BrowserifyWebpack 之类的东西将所有前端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'] 的身份访问它。

    【讨论】:

    • 感谢您的精彩解释。我已经设法使用 webpack,在根项目上创建了一个 bundle.js,然后在我使用sails lift 时使用 webpack 将其编译为资产。这样我就可以在浏览器中要求一些东西。包括vue插件等。可惜我只能投票一次。
    猜你喜欢
    • 1970-01-01
    • 2017-03-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-23
    • 1970-01-01
    • 1970-01-01
    • 2011-08-18
    相关资源
    最近更新 更多