4 | 
5 | 
6 |
4 |
5 |
6 | hi
54 |yo
55 | 56 |{{ docs }}
81 |
9 | ```
10 |
11 | will be compiled into:
12 |
13 | ``` js
14 | createElement('img', {
15 | attrs: {
16 | src: require('../image.png') // this is now a module request
17 | }
18 | })
19 | ```
20 |
21 | By default the following tag/attribute combinations are transformed, and can be configured using the [transformAssetUrls](../options.md#transformasseturls) option.
22 |
23 | ``` js
24 | {
25 | video: ['src', 'poster'],
26 | source: 'src',
27 | img: 'src',
28 | image: ['xlink:href', 'href'],
29 | use: ['xlink:href', 'href']
30 | }
31 | ```
32 |
33 | In addition, if you have configured to use [css-loader](https://github.com/webpack-contrib/css-loader) for the `
11 |
12 |
13 | 
` 会找到你文件系统中的 `./foo.png` 并将其作为一个依赖包含在你的包里。
23 |
24 | ## compiler
25 |
26 | - 类型：`VueTemplateCompiler`
27 | - 默认值：`require('vue-template-compiler')`
28 |
29 | 覆写用来编译单文件组件中 `` 块的默认编译器。
30 |
31 | ## compilerOptions
32 |
33 | - 类型：`Object`
34 | - 默认值：`{}`
35 |
36 | 模板编译器的选项。当使用默认的 `vue-template-compiler` 的时候，你可以使用这个选项来添加自定义编译器指令、模块或通过 `{ preserveWhitespace: false }` 放弃模板标签之间的空格。
37 |
38 | 详情查阅 [`vue-template-compiler` 选项参考](https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-template-compiler/README.md#选项).
39 |
40 | ## transpileOptions
41 |
42 | - 类型：`Object`
43 | - 默认值：`{}`
44 |
45 | 为渲染函数的生成码配置从 ES2015+ 到 ES5 的转译选项。这里的[转译器](https://github.com/vuejs/vue-template-es2015-compiler)是一份 [Buble](https://github.com/Rich-Harris/buble) 的 fork，因此你可以在[这里](https://buble.surge.sh/guide/#using-the-javascript-api)查阅可用的选项。
46 |
47 | 模板渲染函数编译支持一个特殊的变换 `stripWith` (默认启用)，它会删除生成的渲染函数中的 `with` 用法，使它们兼容严格模式。
48 |
49 | ## optimizeSSR
50 |
51 | - 类型：`boolean`
52 | - 默认值：当 webpack 配置中包含 `target: 'node'` 且 `vue-template-compiler` 版本号大于等于 2.4.0 时为 `true`。
53 |
54 | 开启 Vue 2.4 服务端渲染的编译优化之后，渲染函数将会把返回的 vdom 树的一部分编译为字符串，以提升服务端渲染的性能。在一些情况下，你可能想要明确地将其关掉，因为该渲染函数只能用于服务端渲染，而不能用于客户端渲染或测试环境。
55 |
56 | ## hotReload
57 |
58 | - 类型：`boolean`
59 | - 默认值：在开发环境下是 `true`，在生产环境下或 webpack 配置中有 `target: 'node'` 的时候是 `false`。
60 | - 允许的值：`false` (`true` 会强制热重载，即便是生产环境或 `target: 'node'` 时)
61 |
62 | 是否使用 webpack 的[模块热替换](https://webpack.js.org/concepts/hot-module-replacement/)在浏览器中应用变更而**不重载整个页面**。
63 | 用这个选项 (值设为 `false`) 在开发环境下关闭热重载特性。
64 |
65 | ## productionMode
66 |
67 | - 类型：`boolean`
68 | - 默认值：`process.env.NODE_ENV === 'production'`
69 |
70 | 强制指定为生产环境，即禁止 loader 注入只在开发环境有效的代码 (例如 hot-reload 相关的代码)。
71 |
72 | ## shadowMode
73 |
74 | - 类型：`boolean`
75 | - 默认值：`false`
76 |
77 | 编译用于 Shadow DOM 内部的组件。在该模式下，组件的样式会被注入到 `this.$root.$options.shadowRoot`，而不是文档的 head 部分。
78 |
79 | ## cacheDirectory / cacheIdentifier
80 |
81 | - 类型：`string`
82 | - 默认值：`undefined`
83 |
84 | 当这两个选项同时被设置时，开启基于文件系统的模板编译缓存 (需要在工程里安装 `cache-loader`)。
85 |
86 | ::: tip 注意
87 | 在内部，`vue-loader` 和 `cache-loader` 之间的交互使用了 [loader 的内联 import 语法](https://webpack.js.org/concepts/loaders/#inline)，`!` 将会被认为是不同 loaders 之间的分隔符，所以请确保你的 `cacheDirectory` 路径中不包含 `!`。
88 | :::
89 |
90 | ## prettify
91 |
92 | - 类型：`boolean`
93 | - 默认值：`true`
94 |
95 | 在开发环境下，我们默认使用 [prettier](https://prettier.io/) 格式化编译后的模板渲染代码，以方便调试。然而，如果你开发时碰到了 prettier 的某些罕见 bug，比如[格式化多层嵌套的函数时运行时间过长](https://github.com/prettier/prettier/issues/4672)，你可以通过禁用这个选项来绕开。
96 |
97 | ## exposeFilename
98 |
99 | - 类型：`boolean`
100 | - 默认值：`false`
101 |
102 | 在非生产环境下，`vue-loader` 会为组件注入一个 `__file` 属性以提升调试体验。如果一个组件没有 `name` 属性，Vue 会通过 `__file` 字段进行推断，并用于控制台警告中的展示。
103 |
104 | 这个属性在生产环境构建时会被去掉。但如果你在开发一个组件库并且烦于为每个组件设置 `name`，你可能还会想使用它。这时可以把这个选项打开。
105 |
--------------------------------------------------------------------------------
/third-libs/component-compiler-utils-master/lib/styleProcessors/index.ts:
--------------------------------------------------------------------------------
1 | const merge = require('merge-source-map')
2 |
3 | export interface StylePreprocessor {
4 | render(
5 | source: string,
6 | map: any | null,
7 | options: any
8 | ): StylePreprocessorResults
9 | }
10 |
11 | export interface StylePreprocessorResults {
12 | code: string
13 | map?: any
14 | errors: Array53 | This should be red 54 |
55 | 56 | ``` 57 | 58 | 因为这是一个计算属性，所以它也支持 `:class` 的对象/数组语法： 59 | 60 | ``` vue 61 | 62 |64 | Am I red? 65 |
66 |67 | Red and bold 68 |
69 |53 | This should be red 54 |
55 | 56 | ``` 57 | 58 | Since it's a computed property, it also works with the object/array syntax of `:class`: 59 | 60 | ``` vue 61 | 62 |64 | Am I red? 65 |
66 |67 | Red and bold 68 |
69 |53 | Текст должен быть красным 54 |
55 | 56 | ``` 57 | 58 | Поскольку это вычисляемое свойство, оно будет работать с объектом/массивом в `:class`: 59 | 60 | ``` vue 61 | 62 |64 | Буду ли я красным? 65 |
66 |67 | Красный и жирный 68 |
69 |` will attempt to locate the file `./foo.png` on your file system and include it as a dependency of your bundle.
23 |
24 | ## compiler
25 |
26 | - Type: `VueTemplateCompiler`
27 | - default: `require('vue-template-compiler')`
28 |
29 | Override the default compiler used to compile `` blocks in single file components.
30 |
31 | ## compilerOptions
32 |
33 | - type: `Object`
34 | - default: `{}`
35 |
36 | Options for the template compiler. When using the default `vue-template-compiler`, you can use this option to add custom compiler directives, modules, or discard whitespaces between template tags with `{ preserveWhitespace: false }`.
37 |
38 | See [`vue-template-compiler` options reference](https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options).
39 |
40 | ## transpileOptions
41 |
42 | - type: `Object`
43 | - default: `{}`
44 |
45 | Configure ES2015+ to ES5 transpiling options for the generated render function code. The [transpiler](https://github.com/vuejs/vue-template-es2015-compiler) is a fork of [Buble](https://github.com/Rich-Harris/buble), so consult the available options [here](https://buble.surge.sh/guide/#using-the-javascript-api).
46 |
47 | The template render functions compilation supports a special transform `stripWith` (enabled by default), which removes the `with` usage in generated render functions to make them strict-mode compliant.
48 |
49 | ## optimizeSSR
50 |
51 | - type: `boolean`
52 | - default: `true` when the webpack config has `target: 'node'` and `vue-template-compiler` is at version 2.4.0 or above.
53 |
54 | Enable Vue 2.4 SSR compilation optimization that compiles part of the vdom trees returned by render functions into plain strings, which improves SSR performance. In some cases you might want to explicitly turn it off because the resulting render functions can only be used for SSR and cannot be used for client-side rendering or testing.
55 |
56 | ## hotReload
57 |
58 | - type: `boolean`
59 | - default: `true` in development mode, `false` in production mode or when the webpack config has `target: 'node'`.
60 | - allowed value: `false` (`true` will not force Hot Reload neither in production mode nor when `target: 'node'`)
61 |
62 | Whether to use webpack [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) to apply changes in the browser **without reloading the page**.
63 | Use this option (value `false`) to disable the Hot Reload feature in development mode.
64 |
65 | ## productionMode
66 |
67 | - type: `boolean`
68 | - default: `process.env.NODE_ENV === 'production'`
69 |
70 | Force production mode, which prohibits the loader from emitting code (e.g. hot-reload related code) that is development-only.
71 |
72 | ## shadowMode
73 |
74 | - type: `boolean`
75 | - default: `false`
76 |
77 | Compiled the component for usage inside Shadow DOM. In this mode, the styles of the component will be injected into `this.$root.$options.shadowRoot` instead of the document head.
78 |
79 | ## cacheDirectory / cacheIdentifier
80 |
81 | - type: `string`
82 | - default: `undefined`
83 |
84 | When both options are specified, enables file-system-based template compilation caching (requires `cache-loader` to be installed in the same project).
85 |
86 | ::: tip
87 | Interaction between `vue-loader` and `cache-loader` uses [inline loader import syntax](https://webpack.js.org/concepts/loaders/#inline) under the hook, the `!` will be treated as the separator between different loaders, so please ensure `cacheDirectory` doesn't contain `!`.
88 | :::
89 |
90 | ## prettify
91 |
92 | - type: `boolean`
93 | - default: `true`
94 |
95 | In development mode, we use [prettier](https://prettier.io/) to format the compiled render function for ease of debugging by default. However, if you encounter any obscure bug of prettier, such as [exponential compilation time for deeply nested functions](https://github.com/prettier/prettier/issues/4672), you can disable this option to circumvent it.
96 |
97 | ## exposeFilename
98 |
99 | - type: `boolean`
100 | - default: `false`
101 |
102 | In non-production environments, vue-loader injects a `__file` property to components for better debugging experience. If the `name` property is missing in a component, Vue will infer it from the `__file` field to display in console warnings.
103 |
104 | This property is stripped in production builds by default. But you may want to retain it if you are developing a component library and don't want to bother specifying `name` in each component. Then you can turn this option on.
105 |
--------------------------------------------------------------------------------
/test/ssr.spec.js:
--------------------------------------------------------------------------------
1 | const SSR = require('vue-server-renderer')
2 |
3 | const {
4 | genId,
5 | bundle,
6 | baseConfig,
7 | interopDefault
8 | } = require('./utils')
9 |
10 | test('SSR style and moduleId extraction', done => {
11 | bundle({
12 | target: 'node',
13 | entry: './test/fixtures/ssr-style.js',
14 | output: {
15 | path: '/',
16 | filename: 'test.build.js',
17 | libraryTarget: 'commonjs2'
18 | },
19 | externals: ['vue']
20 | }, code => {
21 | const renderer = SSR.createBundleRenderer(code, {
22 | basedir: __dirname,
23 | runInNewContext: 'once'
24 | })
25 | const context = {
26 | _registeredComponents: new Set()
27 | }
28 | renderer.renderToString(context, (err, res) => {
29 | if (err) return done(err)
30 | expect(res).toContain('data-server-rendered')
31 | expect(res).toContain('