webpack 또는 browserify를 사용하지 않고 .vue 파일을 .js 파일로 컴파일합니다.
webpack이나 browserify를 사용하지 않고 .vue 파일을 .js 파일로 컴파일할 수 있는 방법이 있습니까?webpack 또는 browserify의 장점은 알지만 .vue 파일을 컴파일하는 가장 간단한 방법을 원합니다.예를 들어 단일 파일 구성 요소가 있습니다.comp.vue에 순응한.comp.js(컴파일러는 .vue 파일에서 sass와 pug를 컴파일할 수 있어야 합니다.)그리고 저는 그것을 다음과 같이 제 앱에서 사용할 수 있습니다.
<head>
<script src="vue.min.js"></script>
<script src="comp.js"></script> //it may pack the whole component into variable comp and add the style
<script>
Vue.component('comp', comp);
window.onload = function() {
new Vue({el: '#app'});
}
</script>
</head>
<body id='app'>
<comp></comp>
</body>
아니면 다른 유사/비슷한 방법인가요?
vue-cli 도구(버전 2.8.0)에는 개별 구성 요소를 빌드하기 위해 실행할 수 있는 빌드 명령이 있습니다.
vue build Component.vue --prod --lib
이렇게 하면 최적화된 번들이 UMD 형식으로 작성되고 내보낸 라이브러리의 이름이 Component로 설정됩니다. --lib [CustomLibraryName]을 사용하여 번들을 사용자 정의할 수 있습니다.
질문에 있는 것처럼 빌드된 스크립트를 가져와 파일에 포함할 수 있습니다.기술적으로는 후드 아래에 웹 팩을 사용하지만, 아무것도 설정할 필요가 없습니다.
2021년 답변:를 사용합니다.vue build my-component.vue -t lib명령어를 입력합니다.이것은, 다음과 같이 인스톨 할 수 있습니다.npm i -g @vue/cli-service-global
vue 빌드는 dist/ 디렉토리에 javascript를 만듭니다.더하다my-component.umd.js를 사용하여 페이지로 이동합니다.<script>태그를 붙입니다.
이 시점에서 창 개체에서 my-component를 사용할 수 있습니다.다음은 등록 예를 제시하겠습니다.
<script src="https://unpkg.com/vue"></script>
<script src="dist/my-component.umd.js"></script>
<script>
new Vue({
components: {
"my-component": window["my-component"]
}
}).$mount('#app')
</script>
(disclamer: 여기 작성자)
vue3-sfc-loader (Vue2 및 Vue3에서 동작)를 사용하면,.vue(webpack 또는 node.blash 없이) 브라우저에서 직접 파일(의존관계 포함)을 작성합니다.
vue3-sfc-loader템플릿 및 스타일 프리프로세서를 지원합니다(예 참조).
이 명령어를 사용할 것을 권장합니다.
npm install -g @vue/cli-service-global
npx @vue/cli build -t lib -d output input/app.vue
자세한 내용은 다음을 참조하십시오.
npx @vue/cli build --help
언급URL : https://stackoverflow.com/questions/43780134/compile-vue-file-into-js-file-without-webpack-or-browserify
'programing' 카테고리의 다른 글
| register Natives() 메서드는 무엇을 합니까? (0) | 2022.08.07 |
|---|---|
| Java에서의 휘발성 vs 스태틱 (0) | 2022.08.07 |
| C에서 스택에 "클래스"를 만들고 있습니까? (0) | 2022.08.07 |
| Vuex 스토어에서 알 수 없는 로컬 작업 유형을 가져오는 중 (0) | 2022.08.07 |
| 첫 번째 로드에서만 mapGetters의 반응성 문제 (0) | 2022.08.07 |