diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts index a8dcb558bf9..948b361452a 100644 --- a/packages/compiler-core/src/codegen.ts +++ b/packages/compiler-core/src/codegen.ts @@ -71,7 +71,7 @@ function createCodegenContext( ast: RootNode, { mode = 'function', - prefixIdentifiers = mode === 'module', + prefixIdentifiers = mode === 'module' || mode === 'cjs', sourceMap = false, filename = `template.vue.html`, scopeId = null @@ -176,18 +176,21 @@ export function generate( const genScopeId = !__BROWSER__ && scopeId != null && mode === 'module' // preambles - if (mode === 'function') { + if (mode === 'function' || mode === 'cjs') { + const VueBinding = mode === 'function' ? `Vue` : `require("vue")` // Generate const declaration for helpers // In prefix mode, we place the const declaration at top so it's done // only once; But if we not prefixing, we place the declaration inside the // with block so it doesn't incur the `in` check cost for every helper access. if (hasHelpers) { if (prefixIdentifiers) { - push(`const { ${ast.helpers.map(helper).join(', ')} } = Vue\n`) + push( + `const { ${ast.helpers.map(helper).join(', ')} } = ${VueBinding}\n` + ) } else { // "with" mode. // save Vue in a separate variable to avoid collision - push(`const _Vue = Vue\n`) + push(`const _Vue = ${VueBinding}\n`) // in "with" mode, helpers are declared inside the with block to avoid // has check cost, but hoists are lifted out of the function - we need // to provide the helper here. @@ -196,7 +199,7 @@ export function generate( .filter(helper => ast.helpers.includes(helper)) .map(s => `${helperNameMap[s]}: _${helperNameMap[s]}`) .join(', ') - push(`const { ${staticHelpers} } = Vue\n`) + push(`const { ${staticHelpers} } = _Vue\n`) } } } diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts index 8dca9210e56..c5566028882 100644 --- a/packages/compiler-core/src/options.ts +++ b/packages/compiler-core/src/options.ts @@ -57,8 +57,10 @@ export interface CodegenOptions { // - Function mode will generate a single `const { helpers... } = Vue` // statement and return the render function. It is meant to be used with // `new Function(code)()` to generate a render function at runtime. + // - CommonJS mode is like function mode except it retrives helpers from + // `require('vue')`. // - Default: 'function' - mode?: 'module' | 'function' + mode?: 'module' | 'function' | 'cjs' // Prefix suitable identifiers with _ctx. // If this option is false, the generated code will be wrapped in a // `with (this) { ... }` block.