svelte.compile 翻译校准

原文：

result: {
    js,
    css,
    ast,
    warnings,
    vars,
    stats
} = svelte.compile(source: string, options?: {...})

这里就是魔法发生的地方。svelte.compile 把你的组件源代码进行了转换，变成了一个导出一个 class 的 JavaScript 模块。

const svelte = require('svelte/compiler');

const result = svelte.compile(source, {
    // options
});

下面这些选项可以被传递给编译器。没有一个是必须传入的：

Options	default	description
filename	null	`string` 用于调试信息和 sourcemaps。你的打包插件会自动设置这个选项。
name	"Component"	`string` 这个用来设置最终生成的 JavaScript class 的 name（但是如果它与作用域内的其他变量冲突，编译器会重新命名它）。这个通常会通过 `filename` 来进行推断。
formate	"esm"	如果是 `"esm"` 则创建一个 JavaScript 模块（带有 `import` 和 `export`）。如果是 `"cjs"` 则创建一个 CommonJS 模块（带有 `require` 和 `module.exports`），这对于服务端渲染或者用于测试会比较有用。
generate	"dom"	如果是 `"dom"`，Svelte 会生成一个 JavaScript class 用于挂载到 DOM 上。如果是 `"ssr"`，Svelte 会生成一个适用于服务端渲染的带有 `render` 方法的对象。如果是 `false`，不会返回任何 JavaScript 或 CSS，只会返回 metadata。
dev	false	如果为 `true`，则会增加一些额外的代码，用来在开发时进行运行时检查和提供调试信息。
immutable	false	如果为 `true`，告诉编译器你将不会修改任何对象。这允许你在检查变量值是否变化这件事上更加不保守。
hydratable	false	如果为 `true`，启用 `hydrate: true` 运行时选项，这将允许一个组件复用已经存在的 DOM 而不是从头新创建一个。
legacy	false	如果为 `true`，生成的代码可以兼容 IE9 和 IE10，但是会不支持例如 `element.dataset` 之类的东西。
accessors	false	如果为 `true`，组件的 props 将会创建 getters 和 setters。如果为 `false`，它们只会为被导出的只读变量创建（即那些以 `const`，`class` 和 `function` 声明的变量）。如果编译时 `customElement` 为 `true`，那么这个选项默认是 `true`。
customElement	false	如果为 `true`，告诉编译器生成一个自定义的 element constructor 而不是常规的 Svelte 组件。
tag	null	一个 `string` 用来告诉 Svelte 用什么 tag name 来注册自定义 element。它必须是以小写的字母或数字组成的字符串，并至少包含一个连字符，例如 `my-element`。
css	true	如果为 `true`，JavaScript class 中将会包含 styles 并在运行时注入。建议把它设置为 `false`，使用静态生成的 CSS，这样的话 JavaScript bundles 会更小并且性能更好。
preserveComments	false	如果为 `true`，你的 HTML 注释在服务端渲染时会被保留。默认情况下这些注释会被去掉。
preserveWhitespace	false	如果为 `true`，在 element 内部或者 element 之间的空格会按照你输入的样子保留，否则就会被 Svelte 优化掉。
outputFilename	null	一个用在 JavaScript sourcemap 上的 `string`。
cssOutputFilename	null	一个用在 CSS sourcemap 上的 `string`。
sveltePath	"svelte"	`svelte package` 所在的位置。任何来自 `svelte` 或者 `svelte/[module]` 的 import 会根据它进行修改。

返回的 result 对象包含了与你组件相关的代码以及一些有用的元数据。

const {
    js,
    css,
    ast,
    warnings,
    vars,
    stats
} = svelte.compile(source);

js 和 css 包含了以下属性：
- code 是一个 JavaScript string
- map 是一个 sourcemap，额外带有两个方便的方法 toString() 和 toUrl()
ast 是一个抽象语法树，代表了你组件的结构。
warnings 是在编译时产生的一个包含了若干 warning 对象的数组。每个 warning 包含了几个属性：
- code 是用来区别 warning 类型的字符串
- message 描述了具体的问题，使用了人类可读的格式。
- start 和 end，如果 warning 与具体的（代码）位置相关，这两个属性是包含了 line，column 和 character 属性的对象。
- frame，如果适用的话，是一个用行号来高亮非法代码的字符串。
vars 是一个包含了组件声明的数组，例如在 eslint-plugin-svelte3 中被用到。每个变量包含以下几个属性：
- name 就不解释了
- export_name 是导出时这个变量的名字（一般来说就是 name 除非你用了 export...as）
- injected，如果这个组件声明是 Svelte 注入的就是 true，如果是你自己写的就是 false
- module，如果这个值是在 context="module" 脚本下声明的就是 true。
- mutated，如果将值的属性分配给组件内部，则为 true
- reassigned，如果值在组件内部重新赋值，则为 true
- referenced，如果值在组件外部被使用，则为 true
- writable，如果值是以 let 或 var 声明的（不能是 const，class 或 function）
stats 是一个对象，用来给 Svelte 开发团队用来诊断编译器的。避免依赖它保持不变。

第一版校验（by djc）

result: {
    js,
    css,
    ast,
    warnings,
    vars,
    stats
} = svelte.compile(source: string, options?: {...})

这里就是魔法发生的地方。svelte.compile 把你的组件源代码进行了转换，变成了一个导出一个 class 的 JavaScript 模块。

const svelte = require('svelte/compiler');

const result = svelte.compile(source, {
    // options
});

下面这些选项可以被传递给编译器，这些参数都是非必需传入的。

Options	default	description
filename	null	string 用于调试信息和 sourcemaps。你的打包插件会自动设置这个选项。
name	"Component"	string 这个用来设置最终生成的 JavaScript class 的 name（但是如果它与作用域内的其他变量冲突，编译器会重新命名它）。这个通常会通过 filename 来进行推断。
formate	"esm"	该参数如果是 "esm" 则创建一个 JavaScript 模块（采用的语法是 import 和 export）。该参数如果是 "cjs" 则创建一个 CommonJS 模块（采用的语法是 require 和 module.exports），这对于服务端渲染或者测试会比较有用。
generate	"dom"	该参数如果是 "dom"，Svelte 会生成一个 JavaScript class 用于挂载到 DOM 上。如果是 "ssr"，Svelte 会生成一个适用于服务端渲染的带有 render 方法的对象。该参数如果是 false，不会返回任何 JavaScript 或 CSS，只会返回 metadata。
dev	false	如果为 true，则会增加一些额外的代码，用来在开发时进行运行时检查和提供调试信息。
immutable	false	如果为 true，告诉编译器你将不会修改任何对象。这允许你在检查变量值是否变化这件事上更加不保守。
hydratable	false	如果为 true，启用 hydrate: true 运行时选项，这将允许一个组件复用已经存在的 DOM 而不是从头新创建一个。
legacy	false	如果为 true，生成的代码可以兼容 IE9 和 IE10，但是会不支持例如 element.dataset 之类的东西。
accessors	false	如果为 true，组件的 props 将会创建 getters 和 setters。如果为 false，它们只会为被导出的只读变量创建（即那些以 const，class 和 function 声明的变量）。如果编译时 customElement 为 true，那么这个选项默认是 true。
customElement	false	如果为 true，告诉编译器生成一个自定义的 element constructor 而不是常规的 Svelte 组件。
tag	null	该参数类型为 string, 用来告诉 Svelte 用什么 tag name 来注册自定义 element。它必须是以小写的字母或数字组成的字符串，并至少包含一个连字符，例如 my-element。
css	true	如果为 true，JavaScript class 中将会包含 styles 并在运行时注入。建议把它设置为 false，使用静态生成的 CSS，这样的话 JavaScript bundles 会更小并且性能更好。
preserveComments	false	如果该值为 true，在服务端渲染时， HTML 中注释会被保留。默认该值为false, 这些注释会被去掉。
preserveWhitespace	false	如果该值为 true，在 element 内部或者 element 之间的空格会按照你输入的样子保留，否则就会被 Svelte 优化掉。
outputFilename	null	该参数类型为 string,用于生成 JavaScript 的sourcemap
cssOutputFilename	null	该参数类型为 string,用于生成 CSS 的sourcemap
sveltePath	"svelte"	svelte package 所在的位置。任何来自 svelte 或者 svelte/[module] 的 import 会根据它进行修改。

sveltejs-cn / svelte-cn

svelte.compile 翻译校准 #25