This commit is contained in:
parent
58dec1f30c
commit
0a917a99c4
|
@ -1,4 +1,4 @@
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 404
|
h2 404
|
||||||
p 啊~~~ 你好像在找某些不存在的东西!
|
p 哎呦喂~~~您老找的东西好像不存在啊!
|
||||||
|
|
||||||
|
|
|
@ -4,47 +4,40 @@
|
||||||
"title": "一套框架,多种平台",
|
"title": "一套框架,多种平台",
|
||||||
"subtitle": "同时适用手机与桌面"
|
"subtitle": "同时适用手机与桌面"
|
||||||
},
|
},
|
||||||
|
"404": {
|
||||||
|
"title": "出错了!"
|
||||||
|
},
|
||||||
"features": {
|
"features": {
|
||||||
"title": "特性与优点"
|
"title": "特性与优点"
|
||||||
},
|
},
|
||||||
|
|
||||||
"contribute": {
|
"contribute": {
|
||||||
"title": "为Angular做贡献",
|
"title": "为Angular做贡献",
|
||||||
"subtitle": "帮我们构建面向未来的框架",
|
"subtitle": "帮我们构建面向未来的框架",
|
||||||
"autoformat": "true"
|
"autoformat": "true"
|
||||||
},
|
},
|
||||||
|
|
||||||
"news": {
|
"news": {
|
||||||
"title": "新闻"
|
"title": "新闻"
|
||||||
},
|
},
|
||||||
|
|
||||||
"events": {
|
"events": {
|
||||||
"title": "事件",
|
"title": "事件",
|
||||||
"subtitle": "我们将在哪里开会"
|
"subtitle": "我们将在哪里开会"
|
||||||
},
|
},
|
||||||
|
|
||||||
"support": {
|
"support": {
|
||||||
"title": "支持",
|
"title": "支持",
|
||||||
"subtitle": "从Angular社区获得支持"
|
"subtitle": "从Angular社区获得支持"
|
||||||
},
|
},
|
||||||
|
|
||||||
"presskit": {
|
"presskit": {
|
||||||
"title": "出版工具"
|
"title": "出版工具"
|
||||||
},
|
},
|
||||||
|
|
||||||
"books": {
|
"books": {
|
||||||
"title": "书籍"
|
"title": "书籍"
|
||||||
},
|
},
|
||||||
|
|
||||||
"training": {
|
"training": {
|
||||||
"title": "培训"
|
"title": "培训"
|
||||||
},
|
},
|
||||||
|
|
||||||
"communities": {
|
"communities": {
|
||||||
"title": "社区"
|
"title": "社区"
|
||||||
},
|
},
|
||||||
|
|
||||||
"tooling": {
|
"tooling": {
|
||||||
"title": "工具与库"
|
"title": "工具与库"
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@ block includes
|
||||||
:marked
|
:marked
|
||||||
Our Angular application manages what the user sees and can do, achieving this through the interaction of a Component class instance (the *component*) and its user-facing template.
|
Our Angular application manages what the user sees and can do, achieving this through the interaction of a Component class instance (the *component*) and its user-facing template.
|
||||||
|
|
||||||
我们的Angular应用管理着用户之所见和所为,并通过组件的类实例和面向用户的模板来与用户交互。
|
我们的Angular应用管理着用户之所见和所为,并通过Component类的实例(*component*)和面向用户的模板来与用户交互。
|
||||||
|
|
||||||
Many of us are familiar with the component/template duality from our experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). In Angular, the component plays the part of the controller/viewmodel, and the template represents the view.
|
Many of us are familiar with the component/template duality from our experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). In Angular, the component plays the part of the controller/viewmodel, and the template represents the view.
|
||||||
|
|
||||||
|
|
|
@ -114,8 +114,8 @@ a(id="entries-outputs")
|
||||||
Here it sees that we're importing *@angular/core* so it adds that to its dependency list for (potential) inclusion in the bundle.
|
Here it sees that we're importing *@angular/core* so it adds that to its dependency list for (potential) inclusion in the bundle.
|
||||||
It opens *@angular/core* and follows _its_ network of `import` statements until it has build the complete dependency graph from `app.ts` down.
|
It opens *@angular/core* and follows _its_ network of `import` statements until it has build the complete dependency graph from `app.ts` down.
|
||||||
|
|
||||||
这里,它看到我们正在导入*@angular/core*,于是它把这个文件加入它的依赖列表里,为(有可能)把它打进包儿中做准备。
|
这里,Webpack看到我们正在导入*@angular/core*,于是就这个文件加入到它的依赖列表里,为(有可能)把该文件打进包儿中做准备。
|
||||||
它打开*@angular/core*并追踪由_它的_`import`语句构成的网络,直到构建出从`app.ts`往下的整个依赖图谱。
|
它打开*@angular/core*并追踪由_该文件的_`import`语句构成的网络,直到构建出从`app.ts`往下的整个依赖图谱。
|
||||||
|
|
||||||
Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration:
|
Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration:
|
||||||
|
|
||||||
|
@ -128,7 +128,7 @@ a(id="entries-outputs")
|
||||||
We'll load it later with a <script> tag in our index.html.
|
We'll load it later with a <script> tag in our index.html.
|
||||||
|
|
||||||
这个`app.js`输出包儿是个单一的JavaScript文件,它包含我们程序的源码以及它的所有依赖。
|
这个`app.js`输出包儿是个单一的JavaScript文件,它包含我们程序的源码以及它的所有依赖。
|
||||||
后面我们将在`index.html`中用`<script>`标签来加载它。
|
后面我们将在`index.html`中用`<script>`标签来加载它。
|
||||||
|
|
||||||
#### Multiple bundles
|
#### Multiple bundles
|
||||||
|
|
||||||
|
@ -137,12 +137,11 @@ a(id="entries-outputs")
|
||||||
We probably do not want one giant bundle of everything.
|
We probably do not want one giant bundle of everything.
|
||||||
We'll likely prefer to separate our volatile application app code from comparatively stable vendor code modules.
|
We'll likely prefer to separate our volatile application app code from comparatively stable vendor code modules.
|
||||||
|
|
||||||
我们可能不会希望得到一个打进所有东西的巨型包儿。
|
我们可能不会希望把所有东西打进一个巨型包儿,而更喜欢把多变的应用代码从相对稳定的第三方供应商模块中分离出来。
|
||||||
我们可能更喜欢把多变的应用代码从相对稳定的第三方供应商模块中分离出来。
|
|
||||||
|
|
||||||
We change the configuration so that we have two entry points, `app.ts` and `vendor.ts`:
|
We change the configuration so that we have two entry points, `app.ts` and `vendor.ts`:
|
||||||
|
|
||||||
我们修改配置,来获得两个入口点:`app.ts`和`vendor.ts`:
|
我们修改配置,获得两个入口点:`app.ts`和`vendor.ts`:
|
||||||
|
|
||||||
+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'two-entries','webpack.config.js (two entries)')(format=".")
|
+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'two-entries','webpack.config.js (two entries)')(format=".")
|
||||||
:marked
|
:marked
|
||||||
|
@ -157,7 +156,7 @@ a(id="entries-outputs")
|
||||||
The `[name]` in the output name is a Webpack *placeholder* that is replaced with the entry names.
|
The `[name]` in the output name is a Webpack *placeholder* that is replaced with the entry names.
|
||||||
`app` and `vendor` respectively.
|
`app` and `vendor` respectively.
|
||||||
|
|
||||||
输出文件名中出现的`[name]`是一个Webpack的*占位符*,它将被替换为入口点的名字,分别是`app`和`vendor`。
|
在输出文件名中出现的`[name]`是一个Webpack的*占位符*,它将被替换为入口点的名字,分别是`app`和`vendor`。
|
||||||
|
|
||||||
We need a plugin to make this work; we'll [cover that later](#commons-chunk-plugin) in the chapter.
|
We need a plugin to make this work; we'll [cover that later](#commons-chunk-plugin) in the chapter.
|
||||||
|
|
||||||
|
@ -166,7 +165,7 @@ a(id="entries-outputs")
|
||||||
:marked
|
:marked
|
||||||
We met `app.ts` earlier. We wrote `vendor.ts` such that it imports the vendor modules we need:
|
We met `app.ts` earlier. We wrote `vendor.ts` such that it imports the vendor modules we need:
|
||||||
|
|
||||||
我们以前遇到过`app.ts`,就重复了。我们还要再写一个`vendor.ts`,让它导入所需的那些供应商模块:
|
我们以前见过`app.ts`,就不再赘述了。我们再写一个`vendor.ts`,让它导入我们要用的供应商模块:
|
||||||
|
|
||||||
+makeExample('webpack/ts/src/vendor.ts', null,'src/vendor.ts')(format=".")
|
+makeExample('webpack/ts/src/vendor.ts', null,'src/vendor.ts')(format=".")
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue