脚本宝典收集整理的这篇文章主要介绍了""hasScoped"":false,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
笔者系 vue-loader 贡献者(#16)之一
vue-loader is a loader for Webpack that can transform Vue components written in the following format into a plain JavaScript module
简单来说就是:将 .vue 文件变成 .bundle.js,然后放入浏览器运行。
测试是最好的文档,所以我们从测试用例开始分析,找到test/fixture/basic.vue,内容如下:
<template>
<h2 class="red">{{msg}}</h2>
</template>
<script>
export default {
data () {
return {
msg: 'Hello from Component A!'
}
}
}
</script>
<style>
comp-a h2 {
color: #f00;
}
</style>
通过运行测试之后,可以得到以下输出,但是由于文件巨大,笔者只抽出部分开始分析,如下
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./lib/selector.js?type=script&index=0&bustCache!./test/fixtures/basic.vue
/* harmony default export */
var basic = ({
data() {
return {
msg: 'Hello from Component A!'
};
}
});
// CONCATENATED MODULE: ./lib/template-compiler?{"id":"data-v-b647d0ce","hasScoped":false,"buble":{"transforms":{}}}!./lib/selector.js?type=template&index=0&bustCache!./test/fixtures/basic.vue
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c("h2", { staticClass: "red" }, [_vm._v(_vm._s(_vm.msg))])
}
var staticRenderFns = []
render._withStripped = true
var esExports = { render: render, staticRenderFns: staticRenderFns }
/* harmony default export */ var fixtures_basic = (esExports);
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-hot-reload-api") .rerender("data-v-b647d0ce", esExports)
}
}
// CONCATENATED MODULE: .!./test/fixtures/basic.vue
var disposed = false
function injectStyle (ssrContext) {
if (disposed) return
__webpack_require__(3)
}
var normalizeComponent = __webpack_require__(8)
/* script */
/* template */
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
basic,
fixtures_basic,
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "test/fixtures/basic.vue"
if (Component.esModule && Object.keys(Component.esModule).some(function (key) { return key !== "default" && key.substr(0, 2) !== "__"})) { console.error("named exports are not supported in *.vue files.")}
})()}
以上的输出就是最终可以拿到浏览器上运行的 javaScript,尽管笔者已经删除了一些会影响理解的部分代码,但是这么直接观察这个文件,难免还是无从下手。
那么我们继续细化分析步骤,vue-loader 将 basic.vue 编译到最终输出的 bundle.js 的过程中,其实调用了四个小的 loader。它们分别是:
以上四个 loader ,除了 babel-loader 是外部的package,其他三个都存在于 vue-loader 的内部(lib/style-compiler 和 lib/template-compiler 和 lib/selector)。
首先 vue-loader 将 basic.vue 编译成以下内容
/* script */
import __vue_script__ from "!!babel-loader!../../lib/selector?type=script&index=0&bustCache!./basic.vue"
/* template */
import __vue_template__ from "!!../../lib/template-compiler/index?{"id"":""data-v-793be54c""脚本宝典总结
以上是脚本宝典为你收集整理的""hasScoped"":false全部内容,希望文章能够帮你解决""hasScoped"":false所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。