move translate file to new folder. save original file

AriaFallah · May 4, 2016 · 6351938 · 6351938
1 parent d8c36bf
commit 6351938
Show file tree

Hide file tree

Showing 77 changed files with 3,210 additions and 298 deletions.
diff --git a/part1/README.md b/part1/README.md
diff --git a/part1/css-extract/README.md b/part1/css-extract/README.md
@@ -1,10 +1,12 @@
-# 番外 - 提取你的 CSS
+# Extra - Extract Your CSS
 
-好了，你現在已經完成了，但是在 production 你不想要將你的 CSS 檔案放入到你的 JavaScript。為了這個目的，我們將會使用　[Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin)。
+Ok so now you've finished, but in production you don't want your CSS file to be inline with your
+javascript. For this purpose we'll be using the
+[Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin).
 
     npm install --save-dev extract-text-webpack-plugin
 
-我們需要改變我們的 webpack prod 設定檔案：
+And we make the necessary changes to our webpack prod config:
 
 ```javascript
 var path = require('path')
@@ -40,11 +42,14 @@ module.exports = {
 }
 ```
 
-這些修改來自[官方 repo](https://github.com/webpack/extract-text-webpack-plugin) README 的描述。如果你想要知道它是怎麼運作的，可以到官方相關文件做更深入的了解。
+These changes come straight from the README of the
+[official-repo](https://github.com/webpack/extract-text-webpack-plugin). Make sure to take a look if
+you want to know how it works more in depth.
 
-> 它在進入點將每個 require("style.css") chunk 成獨立的 css 輸出檔案。所以你的樣式不會在 JavaScript 內了，但是它會被分離到一個 css bundle 檔案（styles.css）。如果你的 stylesheet 很大，在 JavaScript bundle 時，stylesheet bundle 會被平行的載入，可以加快載入的速度。
+> It moves every require("style.css") in entry chunks into a separate css output file. So your styles are no longer inlined into the javascript, but separate in a css bundle file (styles.css). If your total stylesheet volume is big, it will be faster because the stylesheet bundle is loaded in parallel to the javascript bundle.
 
-如果現在你執行 `npm run build`，你的 CSS 會必獨立成一個檔案，有趣的是，它已經被引入到你的 `index.html` 了。
+Now if you do an `npm run build` using this config your CSS will be in a separate file, and
+interestingly, already included in your `index.html`.
 
 ```html
 <html>
@@ -55,7 +60,7 @@ module.exports = {
 <body>
   <h1>Very Website</h1>
   <section id="color"></section>
-  <button id="button">Such Button</button>
+  <button id="button">Such Button</button>  
 <script src="bundle.js"></script></body>
 </html>
 ```
diff --git a/part1/example1/README.md b/part1/example1/README.md
@@ -1,18 +1,20 @@
-# 範例一 - Bundle 和 Loader
+# Example 1 - Bundling and Loaders
 
 ![Official Dependency Tree](http://i.imgur.com/YU4xBPQ.png)
 
-Webpack 簡稱為模組的整合工具。如果你想要深入的話，可以拜訪「modules」和「module bundling definitely」這兩篇優秀的解釋文章：
-[JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
-和 [JavaScript Modules Part 2: Module Bundling](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2)。
-我們要保持它的簡單，webpack 運作的方式是透過指定一個單一檔案作為你的進入點。
-這個檔案會是 tree 的 root。然後你每次 `require` 一個檔案從其他檔案並把它加入到 tree。當你執行 `webpack`，所有的檔案和 module 都會被 bundle 成一個檔案。
+Webpack is formally referred to as a module bundler. If you want an in-depth and accessible explanation
+on modules and module bundling definitely check out these two great articles:
+[here](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh)
+and [here](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2).
+We're gonna keep it simple. The way that it works is that you specify a single file as your entry point.
+This file will be the root of your tree. Then every time you `require` a file from another file it's
+added to the tree. When you run `webpack`, all these files/modules are bundled into a single file.
 
-這裡是一個簡單的範例：
+Here's a simple example:
 
 ![Dependency Tree](http://i.imgur.com/dSghwwL.png)
 
-根據這樣的情況，你可以有這樣的目錄：
+Given this picture you could have the directory:
 
 ```
 MyDirectory
@@ -23,7 +25,7 @@ MyDirectory
 |- extraFile.js
 ```
 
-這些可能是你檔案的內容：
+and this could be the content of your files
 
 ```javascript
 // index.js
@@ -49,33 +51,37 @@ body {
 }
 ```
 
-當你執行 `webpack`，你會得到一個這個 tree 的 bundle 內容，雖然 `extraFile.js` 也是在相同的目錄中，但它不是被 bundle 的一部份，因為它在 `index.js` 沒有被 `require`。
+When you run `webpack`, you'll get a bundle with the contents of this tree, but `extraFile.js`, which was in the same directory, will not be part of
+the bundle because it is not a part of the dependency tree:
 
-`bundle.js` 看起來會像：
+`bundle.js` will look like:
 
 ```javascript
 // contents of styles.css
 // contents of UIStuff.js + React
 // contents of APIStuff.js + fetch
 ```
 
-被 bundle 的這些檔案是你明確所 require 進來的檔案。
+The things that are bundled are only the things that you explicitly required across your files.
 
 ### Loaders
 
-你可能會注意到，我在上方的範例做了一些奇怪的事情。我在 JavaScript 檔案中 `require` 一個 css 檔案。
+As you probably noticed, I did something strange in the above example. I `required` a css file in a javascript file.
 
-關於 webpack 真的很酷，有趣的事情是，你可以 `require` 更多不只是 JavaScript 的檔案。
+The really cool and interesting thing about webpack is that you can `require` more than just
+javascript files.
 
-在 webpack 這些東西我們稱為 loader。使用這些 loader，你可以 `require` 任何 `.css` 和 `.html`  到 `.png` 檔。
+There is this thing in webpack called a loader. Using these loaders, you can
+`require` anything from `.css` and `.html` to `.png` files.
 
-例如在上圖我有：
+For example in the diagram above I had
 
 ```javascript
 // index.js
 require('./styles.css')
 ```
 
-如果我在我的 webpack 設定檔中，引入 [style-loader](https://github.com/webpack/style-loader) 和 [css-loader](https://github.com/webpack/css-loader)，這不是完全有效的，但是實際上還是會應用 CSS 到我的網頁。
+If I include [the style-loader](https://github.com/webpack/style-loader) and the [the css-loader](https://github.com/webpack/css-loader) in my webpack config, this is not only perfectly
+valid, but also will actually apply the CSS to my page.
 
-你可以在 webpack 使用多個 loader，這裡只是一個單一的例子。
+This is just a single example of the many loaders you can use with webpack.
diff --git a/part1/example2/README.md b/part1/example2/README.md
@@ -1,6 +1,6 @@
-# 範例二 - 一個簡單的範例
+# Example 2 - A minimal example
 
-你的目錄結構像是這樣：
+Say your directory structure looks like this:
 
 ```
 MyDirectory
@@ -11,7 +11,7 @@ MyDirectory
 
 ```
 
-然後這是一個非常簡易的 webpack 設定：
+Then a very minimal webpack config you can make is this
 
 ```javascript
 // webpack.config.js
@@ -26,12 +26,12 @@ module.exports = {
 }
 ```
 
-我們一個一個複習這些屬性：
+Going over the new properties one by one:
 
-* [entry](https://webpack.github.io/docs/configuration.html#entry) - 這是你的 bundle 的進入點，這是我們在討論 [bundling](#bundling) 的部分。`entry` 是一個陣列，根據你的需求，webpack 允許可以有多個進入點，來產生多個 bundle 檔案。
+* [entry](https://webpack.github.io/docs/configuration.html#entry) - The entrypoint of your bundle, which we discussed in the [bundling](#bundling) section. It's an array because webpack allows multiple entry points if you want to generate multiple bundles.
 
-* [output](https://webpack.github.io/docs/configuration.html#output) - 由 webpack 規定的形式輸出。
-  * [path](https://webpack.github.io/docs/configuration.html#output-path) - bundle 檔案位置。
-  * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - bundle 檔案名稱。
+* [output](https://webpack.github.io/docs/configuration.html#output) - Dictates the form of the output by webpack
+  * [path](https://webpack.github.io/docs/configuration.html#output-path) - where to put the bundle
+  * [filename](https://webpack.github.io/docs/configuration.html#output-filename) - what to call the bundle
 
-當你執行 `webpack`，會在你的 dist 資料夾建立一個叫做 `bundle.js` 的檔案。
+When you run `webpack`, this will create a file called `bundle.js` in the dist folder.
diff --git a/part1/example3/README.md b/part1/example3/README.md
@@ -1,12 +1,15 @@
-# 範例三 - 介紹 Plugins
+# Example 3 - Introducing Plugins
 
-想像一下，你使用 webpack 將你的檔案 bundle 在一起，然後你意識到 bundle 後的結果是 900KB。這裡有個問題，但是你可以透過 minify 你的 bundle 檔案來做改善。如果需要做到這一點，你需要使用一個我在前面稍早提到的 [UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) plugin。
+Imagine that you've used webpack to bundle all your files together, and now you've realized that all
+together it's 900KB. This is a problem that can be ameliorated by minifying your bundle. To do this
+you need to use a plugin I mentioned earlier called the
+[UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin).
 
-此外，你需要在本機安裝 webpack 才能實際的去使用這個 plugin。
+Moreover you will need to have webpack installed locally to actually be able to use the plugin.
 
     npm install --save-dev webpack
 
-現在你可以 require webpack 並 minify 你的程式碼。
+Now you can require webpack and minify your code.
 
 ```javascript
 // webpack.config.js
@@ -29,18 +32,19 @@ module.exports = {
   ]
 }
 ```
-我們一個一個複習這些屬性：
+Going over the new properties one by one:
 
-* plugins - 一個可以儲存你的 plugin 的陣列。
-  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify 你的程式碼，並顯示警告訊息。
+* plugins - An array that holds your plugins.
+  * [webpack.optimize.UglifyJsPlugin](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) - Minify your code, and suppress warning messages.
 
-這個時候，當我們執行 `webpack`，`UglifyJsPlugin` 通過像是移除所有空白的處理，可以將你的檔案減少至 200KB。
+This time, when you run `webpack`, now that you have the `UglifyJsPlugin` this could reduce your
+imaginary 900KB file to 200KB by through processes such as removing all the whitespace.
 
-你也可以加入 [OccurenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)。
+You can also add the [OrderOccurencePlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)
 
-> 透過發生次數分配 module 和 chunk 的 id。一些常用的 Id 取得較低（短）的 id。這使得 id 可以預測，透過推薦來減少檔案的大小。
+> Assign the module and chunk ids by occurrence count. Ids that are used often get lower (shorter) ids. This make ids predictable, reduces to total file size and is recommended.
 
-老實說，我不太確定底層的機制是如何工作的，但在目前包含 [webpack2 beta 的預設情況下](https://gist.github.com/sokra/27b24881210b56bbaff7)，所以我將它包含在內。
+To be honest I'm not sure how the underlying mechanisms work, but in the current [webpack2 beta it's included by default](https://gist.github.com/sokra/27b24881210b56bbaff7) so I include it as well.
 
 ```javascript
 // webpack.config.js
@@ -64,4 +68,7 @@ module.exports = {
 }
 ```
 
-所以現在我們寫了一個設定檔讓我們可以 minify 和 bundle 我們的 JavaScript。這個 bundle 檔案可以被複製並貼到其他的專案目錄中，放入 `<script>` 就可以使用。如果*只有 JavaScript*，而且你只在乎關於 webpack 基本的使用，你可以直接跳到[結論](#conclusion)。
+So now we have written a config that allows us to minify and bundle our javascript. This bundle
+could be copied and pasted into another project's directory, and thrown into a `<script>` tag there.
+You can skip to the [conclusion](#conclusion) if you only care about the basics of using webpack
+with *only javascript*.
diff --git a/part1/example4/README.md b/part1/example4/README.md
@@ -1,8 +1,9 @@
-在稍早前面的教學中我提到了 [loaders](#loaders)。這些程式碼來幫助我們 require 非 JavaScript 的檔案。在這種情況下，我們將需要 `style-loader` 和 `css-loader`。首先我們需要安裝這些 loader：
+Earlier in the tutorial I mentioned [loaders](#loaders). These will help us require non-js files in
+our code. In this case, the only loader we will need is the css loader. First we need to install the loader:
 
     npm install --save-dev style-loader css-loader
 
-現在安裝完後，我們可以調整我們的 webpack 設定來引入 `css-loader`：
+Now that it's installed we can tweak our config to include the css loader:
 
 ```javascript
 // webpack.config.js
@@ -32,16 +33,18 @@ module.exports = {
 }
 ```
 
-我們一個一個複習這些屬性：
+Going over the new properties one by one:
 
-* [module](http://webpack.github.io/docs/configuration.html#module) - 設定你的檔案選項。
-  * [loaders](http://webpack.github.io/docs/configuration.html#module-loaders) - 我們為應用程式所指定的一個 loader 陣列。
-    * test - 一個正規表達式來匹配 loader 的檔案。
-    * loaders - loader 用於這些匹配 test （正規表達式）的檔案。
+* [module](http://webpack.github.io/docs/configuration.html#module) - Options affecting your files
+  * [loaders](http://webpack.github.io/docs/configuration.html#module-loaders) - An array of loaders that we specify for our application
+    * test - A regular expression to match the loader with a file
+    * loaders - Which loaders to use for files that match the test
 
-這個時候你執行 `webpack`，如果你 `require` 的檔案結尾是 `.css`，然會我們會使用 `style` 和 `css` loader，將 CSS 加入到 bundle。
+This time when you run `webpack`, if we `require` a file that ends in `.css`, then we will apply
+the `style` and `css` loaders to it, which adds the CSS to the bundle.
 
-如果我們沒有 loaders，我們會得到像是這樣的錯誤：
+If we didn't have the loaders,
+then we would get an error like this:
 
 ```
 ERROR in ./test.css
@@ -50,13 +53,13 @@ Line 1: Unexpected token {
 You may need an appropriate loader to handle this file type.
 ```
 
-**可選項目**
+**Optional**
 
-如果你想要使用 SCSS 而不是 CSS 你需要執行：
+If you want to use SCSS instead of CSS you would need to run:
 
     npm install --save-dev sass-loader node-sass webpack
 
-然後你的 loader 必須修改成：
+and instead your loader would be written as
 
 ```javascript
 {
@@ -65,6 +68,6 @@ You may need an appropriate loader to handle this file type.
 }
 ```
 
-處理 LESS 也類似於這個方式。
+The process is similar for LESS.
 
-要知道這些需要被指定的 loader 是有*順序*的，這是一個很重要部分。在上面的範例，`sass` loader 是第一個應用在你的 `.scss` 檔案，然後是 `css` loader，最後是 `style` loader。你可以看到，這些 loader 的應用模式是由右到左。
+An important aspect to recognize is that there is an *order* to which these loaders need to be specified. In the above example, the `sass` loader is first applied to your `.scss` files, then the `css` loader, and finally the `style` loader. As you can see, the pattern is that these loaders are applied from right to left.
diff --git a/part1/example5/README.md b/part1/example5/README.md
@@ -1,14 +1,15 @@
-# 範例五 - 加入更多的 Plugin
+# Example 5 - Adding More Plugins
 
-現在我們的網站有基礎的樣式，但我們還需要實際的網站樣式。
+Now that we have the infrastructure for styling our website we need an actual page to style.
+We'll be doing this through the
+[html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin),
+which lets us generate an HTML page or use an existing one. We'll use an existing one `index.html`.
 
-我們通過 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) 來做，它讓我們可以產生一個 HTML 頁面使用現有的。我們將使用一個目前現有的 `index.html`。
-
-首先我們需要安裝 plugin：
+First we install the plugin:
 
     npm install --save-dev html-webpack-plugin@2
 
-然後在我們的 webpack 設定檔加入：
+Then we can add it to our config
 
 ```javascript
 // webpack.config.js
@@ -42,9 +43,12 @@ module.exports = {
 }
 ```
 
-這個時候當你執行 `webpack`，因為我們指定一個 `HtmlWebpackPlugin` 和 `./src/index.html` 的 template，它會產生一個檔案叫做 `index.html` 在我們的 `dist` 資料夾，而網頁的內容是 `./src/index.html`。
+This time, when you run `webpack`, because we specified an `HtmlWebpackPlugin` with a template of
+`./src/index.html`, it will generate a file called `index.html` in our `dist` folder with the
+contents of `./src/index.html`
 
-如果 `index.html` 作為 template 是空的也沒用。現在是個好時機我們可以填入一些元素進去。
+There's no point in using `index.html` as a template if it's empty. Now would be a good time to
+actually populate it.
 
 ```html
 <html>
@@ -60,9 +64,10 @@ module.exports = {
 </html>
 ```
 
-注意到我們沒有放入一個 `bundle.js` 的 `<script>` 標籤到我們的 HTML。實際上 plugin 會自動的幫你處理。如果你放入 script，到頭來你會載入兩次相同的程式碼。
+Note that we aren't putting a `<script>` tag into our HTML for `bundle.js`. The plugin will actually
+automatically do that for you. If you do put in the script tag, you'll end up loading your same code twice.
 
-而讓我們加入一些基本的樣式在 `styles.css`：
+and while we're at it let's add some basic styling in `styles.css`
 
 ```css
 h1 {
@@ -86,16 +91,21 @@ button {
 }
 ```
 
-#### 備註
+#### Side note
 
-我覺得我應該提到 `html-webpack-plugin` 需要謹慎使用。對我來說，如果你真的只是簡單的啟用一個 SPA，webpack 應該只產生 HTML 檔案。這裡只需要一個 HTML 檔案，我不會推薦它來產生 12 個 HTML 檔案，當作一個學習經驗。這意思不是說你不能使用 html 檔案之類的，像是 angular 指令，只需要 HTML template 檔案。在這個情況下你可以做類似像是：
+I feel like I should mention that the `html-webpack-plugin` should
+be used sparingly. To me, webpack should generate HTML files if you just have a really simple
+one to bootstrap a SPA. So while it was useful for the learning experience, which required only
+one HTML file, I wouldn't recommend it to generate 12 HTML files. This doesn't mean you can't use
+html files with something like angular directives, which require HTML template files. In that case
+you could do something like:
 
 ```javascript
 // ...directive stuff
-template: require('./templates/button.html') // 使用 raw loader
+template: require('./templates/button.html') // using raw loader
 ```
 
-相反的，它意味著你不應該做這樣的事情︰
+Instead, it means that you should not be doing something like this:
 
 ```javascript
 new HtmlWebpackPlugin
@@ -108,4 +118,4 @@ new HtmlWebpackPlugin({
 })
 ```
 
-如果我這個部份我搞錯了，請任何有這方面經驗的人隨時糾正我。
+Anyone with other experience feel free to correct me if I'm wrong.