How to use @vue/component-compiler-utils - 10 common examples
To help you get started, we’ve selected a few @vue/component-compiler-utils examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
LinusBorg / vue-cli-plugin-test-attrs / index.js View on Github 
function genVueLoaderCacheConfig() {
return api.genCacheConfig('vue-loader', {
'vue-loader': require('vue-loader/package.json').version,
/* eslint-disable-next-line node/no-extraneous-require */
'@vue/component-compiler-utils': require('@vue/component-compiler-utils/package.json')
.version,
'vue-template-compiler': require('vue-template-compiler/package.json')
.version,
testAttrsOptions: JSON.stringify(options),
})
}
}function genInlineComponentText(template, script) {
// https://github.com/vuejs/vue-loader/blob/423b8341ab368c2117931e909e2da9af74503635/lib/loaders/templateLoader.js#L46
const finalOptions = {
source: `<div>${template}</div>`,
filename: 'inline-component', // TODO：这里有待调整
compiler
};
const compiled = compileTemplate(finalOptions);
// tips
if (compiled.tips && compiled.tips.length) {
compiled.tips.forEach(tip => {
console.warn(tip);
});
}
// errors
if (compiled.errors && compiled.errors.length) {
console.error(
`\n Error compiling template:\n${pad(compiled.source)}\n` +
compiled.errors.map(e => ` - ${e}`).join('\n') +
'\n'
);
}
let demoComponentContent = `
${compiled.code}webpackConfig.resolveLoader
.modules
.add('node_modules')
.add(api.resolve('node_modules'))
.add(resolveLocal('node_modules'))
webpackConfig.module
.noParse(/^(vue|vue-router|vuex|vuex-router-sync)$/)
// js is handled by cli-plugin-babel ---------------------------------------
// vue-loader --------------------------------------------------------------
const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
'vue-loader': require('vue-loader/package.json').version,
/* eslint-disable-next-line node/no-extraneous-require */
'@vue/component-compiler-utils': require('@vue/component-compiler-utils/package.json').version,
'vue-template-compiler': require('vue-template-compiler/package.json').version
})
webpackConfig.module
.rule('vue')
.test(/\.vue$/)
.use('cache-loader')
.loader(require.resolve('cache-loader'))
.options(vueLoaderCacheConfig)
.end()
.use('vue-loader')
.loader(require.resolve('vue-loader'))
.options(Object.assign({
compilerOptions: {
whitespace: 'condense'
}resourceQuery
} = loaderContext
const rawQuery = resourceQuery.slice(1)
const inheritQuery = `&${rawQuery}`
const incomingQuery = qs.parse(rawQuery)
const options = loaderUtils.getOptions(loaderContext) || {}
const isServer = target === 'node'
const isShadow = !!options.shadowMode
const isProduction = options.productionMode || minimize || process.env.NODE_ENV === 'production'
const filename = path.basename(resourcePath)
const context = rootContext || process.cwd()
const sourceRoot = path.dirname(path.relative(context, resourcePath))
const descriptor = parse({
source,
compiler: options.compiler || loadTemplateCompiler(loaderContext),
filename,
sourceRoot,
needMap: sourceMap
})
// if the query has a type field, this is a language block request
// e.g. foo.vue?type=template&id=xxxxx
// and we will return early
if (incomingQuery.type) {
return selectBlock(
descriptor,
loaderContext,
incomingQuery,
!!options.appendExtensionfunction preprocessTemplate(data, type) {
let templateData = data;
switch (type) {
case 'jade':
case 'pug':
// Add empty require function to the context to avoid errors with webpack require inside pug
templateData = pug.render(data, {filename: 'source.html', pretty: true, require: function() {}});
break;
case 'vue':
const vueFile = vueCompiler.parse({ compiler, source: data, needMap: false});
if (!vueFile.template) return ''; // return an empty string
templateData = vueFile.template.content;
if (vueFile.template.lang) {
return preprocessTemplate(templateData, vueFile.template.lang);
}
break;
default:
break;
}
return templateData.trim();
}// for vue-component-compiler
const finalOptions = {
source,
filename: this.resourcePath,
compiler,
compilerOptions,
// allow customizing behavior of vue-template-es2015-compiler
transpileOptions: options.transpileOptions,
transformAssetUrls: options.transformAssetUrls || true,
isProduction,
isFunctional,
optimizeSSR: isServer && options.optimizeSSR !== false,
prettify: options.prettify
}
const compiled = compileTemplate(finalOptions)
// tips
if (compiled.tips && compiled.tips.length) {
compiled.tips.forEach(tip => {
loaderContext.emitWarning(typeof tip === 'object' ? tip.msg : tip)
})
}
// errors
if (compiled.errors && compiled.errors.length) {
// 2.6 compiler outputs errors as objects with range
if (compiler.generateCodeFrame && finalOptions.compilerOptions.outputSourceRange) {
// TODO account for line offset in case template isn't placed at top
// of the file
loaderContext.emitError(
`\n\n Errors compiling template:\n\n` +// for vue-component-compiler
const finalOptions = {
source,
filename: this.resourcePath,
compiler,
compilerOptions,
// allow customizing behavior of vue-template-es2015-compiler
transpileOptions: options.transpileOptions,
transformAssetUrls: options.transformAssetUrls || true,
isProduction,
isFunctional,
optimizeSSR: isServer && options.optimizeSSR !== false,
prettify: options.prettify
}
const compiled = compileTemplate(finalOptions)
// tips
if (compiled.tips && compiled.tips.length) {
compiled.tips.forEach(tip => {
loaderContext.emitWarning(typeof tip === 'object' ? tip.msg : tip)
})
}
// errors
if (compiled.errors && compiled.errors.length) {
// 2.6 compiler outputs errors as objects with range
if (compiler.generateCodeFrame && finalOptions.compilerOptions.outputSourceRange) {
// TODO account for line offset in case template isn't placed at top
// of the file
loaderContext.emitError(
`\n\n Errors compiling template:\n\n` +const finalOptions = {
source,
filename: this.resourcePath,
compiler,
compilerOptions: Object.assign( {}, compilerOptions, {
imports: cOptions.imports,
} ),
// allow customizing behavior of vue-template-es2015-compiler
transpileOptions: options.transpileOptions,
transformAssetUrls: options.transformAssetUrls || true,
isProduction,
isFunctional,
optimizeSSR: false
}
const compiled = compileTemplate(finalOptions)
// tips
if (compiled.tips && compiled.tips.length) {
compiled.tips.forEach(tip => {
loaderContext.emitWarning(tip)
})
}
// errors
if (compiled.errors && compiled.errors.length) {
loaderContext.emitError(
`\n Error compiling template:\n${pad(compiled.source)}\n` +
compiled.errors.map(e => ` - ${e}`).join('\n') +
'\n'
)
}// pre process
if (transformer.preprocess) {
content = transformer.preprocess(content, filePath, config, stylePart.attrs)
}
// transform
if (transformer.process) {
content = transformer.process(content, filePath, config, stylePart.attrs)
} else {
const preprocessOptions = getPreprocessOptions(
stylePart.lang,
filePath,
config
)
const result = compileStyle({
source: content,
filePath,
preprocessLang: stylePart.lang,
preprocessOptions,
scoped: false
})
logResultErrors(result)
content = result.code
}
// post process
if (transformer.postprocess) {
return transformer.postprocess(content, filePath, config, stylePart.attrs)
}
return JSON.stringify(extractClassMap(content))filter: filePath => {
return !/\.unit\.js$/.test(filePath)
}
})
fs.writeFileSync(
path.resolve(destPackageFolder, 'index.js'),
`\
export * from './src${componentName ? '/' + componentName + '.vue' : ''}'
`
)
let description = libConfig.description
let example
if (componentName) {
const srcFilePath = getPath(`../src/${componentName}.vue`)
const result = parseComponent({
source: fs.readFileSync(srcFilePath, { encoding: 'utf8' }),
filename: srcFilePath,
compiler: require('vue-template-compiler')
})
description = JSON.parse(
result.customBlocks.find(block => block.type === 'meta').content
).description
example = result.customBlocks
.find(block => block.type === 'example')
.content.trim()
}
const packageConfig = {
name: packageName,
moduleName: componentName || _.upperFirst(_.camelCase(packageName)),
description,
example@vue/component-compiler-utils
Lower level utilities for compiling Vue single file components
