SailsJS보기에 node_module 포함

Question

작은 플랫폼을 개발하기 위해 돛 (http://sailsjs.com)을 사용하고 있습니다. 모든 것은 문서를 따라 가면서 매끄럽게 진행됩니다. 하지만이 자바 스크립트 프레임 워크 세계와 npm 등 새로운, 난 다른 node_modules 포함하여 문제가 있었고 .ejs보기에서 그들을 사용 ... 모든 모듈을보기에 포함시킬 수 있지만 이해할 수 있지만 어떻게 이해할 수 있습니다. 나는 그 중 일부를 포함시킬 수 있는가? 사용하려고 시도합니다. https://www.npmjs.com/package/vue-slider-component 미리 감사드립니다.이 오류가 멍청한 경우 미안합니다.

Answer 1

귀하의 혼란은 이해할 수 있습니다. 문제는 비교적 최근까지 node_modules에 설치된 것들이 백 엔드 코드에서만 사용되었다는 것입니다. 결국, node_modules 폴더에는 "Node"라는 단어가 있으며, 을 구성하는 데 도움이되는 NPM (노드 패키지 관리자)과 함께 사용하기 위해 만들어졌습니다. 노드 (예 : 서버 측 JavaScript) 파일!

많은 프런트 엔드 플러그인이 Bower에 게시되었지만 Angular 2 및 Vue와 같은 최신 프레임 워크는 NPM에 플러그인을 게시하는 경우가 많습니다. 앱에서 움직이는 부품 수가 줄어들 기 때문입니다. 문제는 서버에서 .ejs보기를 require('vue-slider-component')으로 렌더링하려고 시도하면 서버 (예 : Sails.js)이보기를 렌더링하기 전에 해당 코드를로드하고 실행하게됩니다. 실제로 원하는 것은 해당 플러그인을위한 것입니다. 브라우저에서 을 실행하려면.

장기적인 해결책은 모든 프런트 엔드 JavaScript 파일을 "번들"로 컴파일하기 위해 Browserify 또는 Webpack과 같은 것을 사용하는 것입니다. ,

import vueSlider from 'vue-slider-component/src/vue2-slider.vue' 

다음 Browserify은, 그 라인을 볼 vue2-slider.vue 해당 파일을로드의 my-vue-app.js 파일의 상단에 추가, 다른 마법을 수행합니다 그래서 예를 들어, 당신은 라인을 포함 assets/js/my-vue-app.js 같은 파일이있는 경우 다른 프런트 엔드 .js 파일과 결합하여 browserified.js과 같은 파일을 출력 한 다음 <script src="/path/to/browserified.js">을 통해 HTML에 포함시킵니다.

새 Sails 앱은 Grunt를 사용하여 <script> 태그를 구성하고 삽입하기 때문에 Browserify 나 Webpack 같은 것을 Sails와 함께 사용하는 방법을 혼란스럽게 할 수 있습니다. Sails 1.0에는 Grunt 대신 Webpack을 사용하는 경우 seed project이 있습니다. Sails v0.12.x의 경우, Sails와 함께 Broswerify 또는 Webpack을 사용하는 몇 가지 예를 찾으려면 Google을 방문해야합니다.

장기적으로 단기 솔루션, 그리고 아마도 유지 보수가되지는 <script src="/js/vue-slider-component.js">와의 접속을 사용하여 HTML에 추가 자산 폴더 (예 : assets/js/vue-slider-component.js 등)에 minified vue-js-slider component의 내용을 저장하는 것입니다 코드는 window['vue-slider-component']입니다.