From 4f7e6025c68914f959ee619f836fc05aa5b5a429 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 4 May 2021 19:21:13 +0900
Subject: [PATCH 1/8] fix: casing on npm

https://github.com/vuejs/docs-next/commit/8c8d85aaab77ae174cdbbc14c0c3a57aadf51598#diff-7d4d6d18bce98fb202b53d0597ea1e4a7ba7f467b9db5a86e4c25d8d59fc7fe0
---
 src/guide/single-file-component.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md
index 7bbd6a43..3b65e726 100644
--- a/src/guide/single-file-component.md
+++ b/src/guide/single-file-component.md
@@ -35,7 +35,7 @@
 
 単一ファイルコンポーネントのアイディアが好きではなくても、JavaScript と CSS を別々ファイルに分けることによってホットリロードとプリコンパイル機能を活用することができます:
 
-``` html
+```html
 <!-- my-component.vue -->
 <template>
   <div>This will be pre-compiled</div>
@@ -55,7 +55,7 @@
 
 `.vue` コンポーネントにより、高度な JavaScript アプリケーションの分野へ入っていきます。 これはあなたがまだ使ったことのない、いくつかの追加のツールの使い方を学ぶことを意味します:
 
-- **Node Package Manager (NPM)**: レジストリからパッケージを取得する方法については[Getting Started guide](https://docs.npmjs.com/packages-and-modules/getting-packages-from-the-registry) のセクションを読んでください。
+- **Node Package Manager (npm)**: レジストリからパッケージを取得する方法については[Getting Started guide](https://docs.npmjs.com/packages-and-modules/getting-packages-from-the-registry) のセクションを読んでください。
 
 - **ES2015/16 を使ったモダンな JavaScript**: Babel の [Learn ES2015 guide](https://babeljs.io/docs/en/learn)を読んでみてください。今すぐには全ての機能を暗記する必要はないですが、参考として戻れるようにしておいてください。
 

From 7ba4a0ffe5473c1dc5488665e717beb4655453f7 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 4 May 2021 19:24:04 +0900
Subject: [PATCH 2/8] fix: match lines with the original

---
 src/guide/single-file-component.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md
index 3b65e726..5366ffe2 100644
--- a/src/guide/single-file-component.md
+++ b/src/guide/single-file-component.md
@@ -48,8 +48,7 @@
 
 ### サンドボックスの例
 
-すぐに触ってそして単一ファイルコンポーネントを試したい方は、CodeSandBox 上の [この単純な todo アプリケーション](https://codesandbox.io/s/vue-todo-list-app-with-single-file-component-vzkl3?file=/src/App.vue)
-をチェックしてみてください。
+すぐに触ってそして単一ファイルコンポーネントを試したい方は、CodeSandBox 上の [この単純な todo アプリケーション](https://codesandbox.io/s/vue-todo-list-app-with-single-file-component-vzkl3?file=/src/App.vue) をチェックしてみてください。
 
 ### JavaScript でモジュールビルドシステムが初めてなユーザ向け
 

From 8cfb610c436f998103d7e4f8d32fbed25a0e60c8 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 4 May 2021 19:25:58 +0900
Subject: [PATCH 3/8] Add bundling with rollup to docs

https://github.com/vuejs/docs-next/commit/d451d21a2177556a0adedcc0005b853905a477b6#diff-7d4d6d18bce98fb202b53d0597ea1e4a7ba7f467b9db5a86e4c25d8d59fc7fe0
---
 src/guide/single-file-component.md | 104 +++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)

diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md
index 5366ffe2..4649e230 100644
--- a/src/guide/single-file-component.md
+++ b/src/guide/single-file-component.md
@@ -65,3 +65,107 @@
 CLI はツールの設定の大部分の面倒を見てくれますが、[設定オプション](https://cli.vuejs.org/config/)を通してよりきめ細かいカスタマイズをすることもできます。
 
 あなたが独自のビルドセットアップをゼロから作ることを好む場合、webpack と [vue-loader](https://vue-loader.vuejs.org)を手動で設定する必要があるでしょう。webpack についてもっと学びたいときは、[公式ドキュメント](https://webpack.js.org/configuration/)や [webpack learning academy](https://webpack.academy/p/the-core-concepts)を参照してください。
+
+### Building with rollup
+
+Most of the time when developing a third-party library we want to build it in a way that allows the consumers of the library to [tree shake](https://webpack.js.org/guides/tree-shaking/) it. To enable tree-shaking we need to build `esm` modules. Since webpack and, in turn, vue-cli do not support building `esm` modules we need to rely on [rollup](https://rollupjs.org/).
+
+#### Installing Rollup
+
+We will need to install Rollup and a few dependencies:
+
+```bash
+npm install --save-dev rollup @rollup/plugin-commonjs rollup-plugin-vue
+```
+
+These are the minimal amount of rollup plugins that we need to use to compile the code in an `esm` module. We may want to also add [rollup-plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel) to transpile their code and [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) if we use dependencies that we want to bundle with our library.
+
+#### Configuring Rollup
+
+To configure our build with Rollup we will need to create a `rollup.config.js` file in the root of our project:
+
+```bash
+touch rollup.config.js
+```
+
+Once the file is created we will need to open it with our editor of choice and add the following code.
+
+```javascript
+// import our third party plugins
+import commonjs from 'rollup-plugin-commonjs'
+import VuePlugin from 'rollup-plugin-vue'
+import pkg from './package.json' // import our package.json file to re-use the naming
+
+export default {
+  // this is the file containing all our exported components/functions
+  input: 'src/index.js',
+  // this is an array of outputed formats
+  output: [
+    {
+      file: pkg.module, // the name of our esm librry
+      format: 'esm', // the format of choice
+      sourcemap: true, // ask rollup to include sourcemaps
+    }
+  ],
+  // this is an array of the plugins that we are including
+  plugins: [
+    commonjs(),
+    VuePlugin()
+  ],
+  // ask rollup to not bundle Vue in the library
+  external: ['vue']
+}
+```
+
+#### Configuring package.json
+
+To take advantage of our newly created `esm` module we need to add a few fields in our `package.json` file:
+
+```json
+ "scripts": {
+   ...
+   "build": "rollup -c rollup.config.js",
+   ...
+ },
+ "module": "dist/my-library-name.esm.js",
+ "files": [
+   "dist/",
+ ],
+ ```
+
+Here we are specifying:
+
+- how to build our package
+- what files we want to bundle in our package
+- what file represents our `esm` module
+
+#### Bundling `umd` and `cjs` modules
+
+To also build `umd` and `cjs` modules we can simply add a few lines of configuration to our `rollup.config.js` and `package.json`
+
+##### rollup.config.js
+```javascript
+output: [
+  ...
+   {
+      file: pkg.main,
+      format: 'cjs',
+      sourcemap: true,
+    },
+    {
+      file: pkg.unpkg,
+      format: 'umd',
+      name: 'MyLibraryName',
+      sourcemap: true,
+      globals: {
+        vue: 'Vue',
+      },
+    },
+]
+```
+##### package.json
+```json
+"module": "dist/my-library-name.esm.js",
+"main": "dist/my-library-name.cjs.js",
+"unpkg": "dist/my-library-name.global.js",
+```

From bcc9ca167f3bd058f5998d86054d2aec53f5dd32 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 4 May 2021 19:26:45 +0900
Subject: [PATCH 4/8] Fix: typo in single-file-component.md

https://github.com/vuejs/docs-next/commit/2aa4491eb73b1b207292539e7f7615c8d46a587b#diff-7d4d6d18bce98fb202b53d0597ea1e4a7ba7f467b9db5a86e4c25d8d59fc7fe0
---
 src/guide/single-file-component.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md
index 4649e230..9f9f9ba9 100644
--- a/src/guide/single-file-component.md
+++ b/src/guide/single-file-component.md
@@ -102,7 +102,7 @@ export default {
   // this is an array of outputed formats
   output: [
     {
-      file: pkg.module, // the name of our esm librry
+      file: pkg.module, // the name of our esm library
       format: 'esm', // the format of choice
       sourcemap: true, // ask rollup to include sourcemaps
     }

From 9149609ea70a0cba15d389acc46725ae5860292c Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 4 May 2021 19:29:07 +0900
Subject: [PATCH 5/8] Correct spelling

https://github.com/vuejs/docs-next/commit/9436d6c66347842c413af661d6e6d4cddec18905#diff-7d4d6d18bce98fb202b53d0597ea1e4a7ba7f467b9db5a86e4c25d8d59fc7fe0
---
 src/guide/single-file-component.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md
index 9f9f9ba9..ca6cd773 100644
--- a/src/guide/single-file-component.md
+++ b/src/guide/single-file-component.md
@@ -99,7 +99,7 @@ import pkg from './package.json' // import our package.json file to re-use the n
 export default {
   // this is the file containing all our exported components/functions
   input: 'src/index.js',
-  // this is an array of outputed formats
+  // this is an array of outputted formats
   output: [
     {
       file: pkg.module, // the name of our esm library

From cbf80de43d71f04a461d660cfeb85b69c643aa8c Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 4 May 2021 19:30:07 +0900
Subject: [PATCH 6/8] chore: switch javascript code blocks to js

https://github.com/vuejs/docs-next/commit/5753b78caa80309065554b2c2583bcdce03bc325#diff-7d4d6d18bce98fb202b53d0597ea1e4a7ba7f467b9db5a86e4c25d8d59fc7fe0
---
 src/guide/single-file-component.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md
index ca6cd773..73c7026b 100644
--- a/src/guide/single-file-component.md
+++ b/src/guide/single-file-component.md
@@ -90,7 +90,7 @@ touch rollup.config.js
 
 Once the file is created we will need to open it with our editor of choice and add the following code.
 
-```javascript
+```js
 // import our third party plugins
 import commonjs from 'rollup-plugin-commonjs'
 import VuePlugin from 'rollup-plugin-vue'
@@ -144,7 +144,7 @@ Here we are specifying:
 To also build `umd` and `cjs` modules we can simply add a few lines of configuration to our `rollup.config.js` and `package.json`
 
 ##### rollup.config.js
-```javascript
+```js
 output: [
   ...
    {

From d81975a41b2982380f3879804ef4bff275315526 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 4 May 2021 21:30:17 +0900
Subject: [PATCH 7/8] docs: translate single-file-component page

---
 src/guide/single-file-component.md | 60 +++++++++++++++---------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md
index 73c7026b..5338c19f 100644
--- a/src/guide/single-file-component.md
+++ b/src/guide/single-file-component.md
@@ -2,14 +2,14 @@
 
 ## 前書き
 
-多くの Vue プロジェクトでは、 グローバルコンポーネントは  `app.mount('#app')` の後に各ページの body においてコンテナ要素のターゲットすることに続いて、`app.component()` を使用して定義されています。
+多くの Vue プロジェクトでは、グローバルコンポーネントは  `app.mount('#app')` の後に各ページの body においてコンテナ要素のターゲットすることに続いて、`app.component()` を使用して定義されています。
 
 これはある view を拡張するためだけに JavaScript が利用された中小規模のプロジェクトにおいてはとても有効です。しかしながら、あなたのフロントエンドで JavaScript 全体を操作するようなもっと複雑なプロジェクトでは、これらの点において不利益になります。:
 
 - **グローバル宣言**は全てのコンポーネントに一意な名前を強制すること
 - シンタックスハイライトがない**文字列テンプレート**と複数行 HTML の時の醜いスラッシュが強要されること
 - **CSS サポート無し**だと HTML と JavaScript がコンポーネントにモジュール化されている間、これ見よがしに無視されること
-- **ビルド処理がない**と Pug(前 Jade)と Babel のようなプリプロセッサよりむしろ、 HTML や ES5 JavaScript を制限されること
+- **ビルド処理がない**と Pug(前 Jade)と Babel のようなプリプロセッサよりむしろ、HTML や ES5 JavaScript を制限されること
 
 これらは全ては Webpack や Browserify のビルドツールにより実現された `.vue`拡張子の**単一ファイルコンポーネント**によって解決されます。
 
@@ -23,7 +23,7 @@
 - [CommonJS モジュール](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module)
 - [コンポーネントスコープ CSS](https://vue-loader.vuejs.org/en/features/scoped-css.html)
 
-約束した通り、Pug、Babel (ES2015 モジュールと一緒に) や Stylus など 綺麗で機能が豊富なコンポーネントもプリプロセッサとして利用することができます。
+約束した通り、Pug、Babel (ES2015 モジュールと一緒に) や Stylus など綺麗で機能が豊富なコンポーネントもプリプロセッサとして利用することができます。
 
 <a href="https://codesandbox.io/s/vue-single-file-component-with-pre-processors-mr3ik?file=/src/App.vue" target="_blank" rel="noopener noreferrer"><img src="/images/sfc-with-preprocessors.png" width="563" alt="Single-file component with pre-processors example (click for code as text)" style="display: block; margin: 15px auto; max-width: 100%"></a>
 
@@ -31,7 +31,7 @@
 
 ### 関心の分離について
 
-注意すべき重要な点の１つは、**関心の分離がファイルタイプの分離とは等しくないことです。** 現代の UI 開発では、私たちはコードベースを互いに織りなす3つの巨大なレイヤーに分割するのではなく、それらを疎結合なコンポーネントに分割して構成する方がはるかに理にかなっていることを発見しました。コンポーネントの内部では、そのテンプレート、ロジック、スタイルが本質的に結合しており、実際にそれらを配置することでコンポーネントの一貫性と保守性が高くなります。
+注意すべき重要な点の 1 つは、**関心の分離がファイルタイプの分離とは等しくないことです。** 現代の UI 開発では、私たちはコードベースを互いに織りなす 3 つの巨大なレイヤーに分割するのではなく、それらを疎結合なコンポーネントに分割して構成する方がはるかに理にかなっていることを発見しました。コンポーネントの内部では、そのテンプレート、ロジック、スタイルが本質的に結合しており、実際にそれらを配置することでコンポーネントの一貫性と保守性が高くなります。
 
 単一ファイルコンポーネントのアイディアが好きではなくても、JavaScript と CSS を別々ファイルに分けることによってホットリロードとプリコンパイル機能を活用することができます:
 
@@ -58,7 +58,7 @@
 
 - **ES2015/16 を使ったモダンな JavaScript**: Babel の [Learn ES2015 guide](https://babeljs.io/docs/en/learn)を読んでみてください。今すぐには全ての機能を暗記する必要はないですが、参考として戻れるようにしておいてください。
 
-これらのリソースに没頭した後は、[Vue CLI](https://cli.vuejs.org/)を確認することをお勧めします。 指示に従うことであっという間に `.vue` コンポーネントと ES2015、 Webpack、ホットリローティングを備えた Vue プロジェクトを手に入れられるはずです！
+これらのリソースに没頭した後は、[Vue CLI](https://cli.vuejs.org/)を確認することをお勧めします。 指示に従うことであっという間に `.vue` コンポーネントと ES2015、Webpack、ホットリローティングを備えた Vue プロジェクトを手に入れられるはずです！
 
 ### 上級ユーザ向け
 
@@ -66,60 +66,60 @@ CLI はツールの設定の大部分の面倒を見てくれますが、[設定
 
 あなたが独自のビルドセットアップをゼロから作ることを好む場合、webpack と [vue-loader](https://vue-loader.vuejs.org)を手動で設定する必要があるでしょう。webpack についてもっと学びたいときは、[公式ドキュメント](https://webpack.js.org/configuration/)や [webpack learning academy](https://webpack.academy/p/the-core-concepts)を参照してください。
 
-### Building with rollup
+### Rollup でビルド
 
-Most of the time when developing a third-party library we want to build it in a way that allows the consumers of the library to [tree shake](https://webpack.js.org/guides/tree-shaking/) it. To enable tree-shaking we need to build `esm` modules. Since webpack and, in turn, vue-cli do not support building `esm` modules we need to rely on [rollup](https://rollupjs.org/).
+ほとんどの場合、サードパーティのライブラリを開発するときは、そのライブラリの利用者が [Tree Shaking](https://webpack.js.org/guides/tree-shaking/) できるような方法でビルドしたいと考えています。Tree Shaking を有効にするためには、`esm` モジュールをビルドする必要があります。 Webpack や Vue CLI は `esm` モジュールのビルドをサポートしていないため、[Rollup](https://rollupjs.org/) の依存が必要です。
 
-#### Installing Rollup
+#### Rollup のインストール
 
-We will need to install Rollup and a few dependencies:
+Rollup といくつかの依存関係をインストールする必要があります:
 
 ```bash
 npm install --save-dev rollup @rollup/plugin-commonjs rollup-plugin-vue
 ```
 
-These are the minimal amount of rollup plugins that we need to use to compile the code in an `esm` module. We may want to also add [rollup-plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel) to transpile their code and [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) if we use dependencies that we want to bundle with our library.
+これらは `esm` モジュールのコードをコンパイルするために必要な最小限の Rollup プラグインです。コードをコンパイルするために [rollup-plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel) を、ライブラリにバンドルしたい依存関係を使うならば [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) を追加できます。
 
-#### Configuring Rollup
+#### Rollup の設定
 
-To configure our build with Rollup we will need to create a `rollup.config.js` file in the root of our project:
+Rollup でビルドを設定するには、プロジェクトのルートに `rollup.config.js` ファイルを作成する必要があります:
 
 ```bash
 touch rollup.config.js
 ```
 
-Once the file is created we will need to open it with our editor of choice and add the following code.
+ファイルを作成したら、お好きなエディタで開き、以下のコードを追加します。
 
 ```js
-// import our third party plugins
+// サードパーティのプラグインをインポート
 import commonjs from 'rollup-plugin-commonjs'
 import VuePlugin from 'rollup-plugin-vue'
-import pkg from './package.json' // import our package.json file to re-use the naming
+import pkg from './package.json' // 名前を再利用するために package.json ファイルをインポート
 
 export default {
-  // this is the file containing all our exported components/functions
+  // エクスポートされたすべてのコンポーネントや関数を含むファイル
   input: 'src/index.js',
-  // this is an array of outputted formats
+  // 出力されるフォーマットの配列
   output: [
     {
-      file: pkg.module, // the name of our esm library
-      format: 'esm', // the format of choice
-      sourcemap: true, // ask rollup to include sourcemaps
+      file: pkg.module, // esm ライブラリの名前
+      format: 'esm', // フォーマットの選択
+      sourcemap: true, // ソースマップを含めるか
     }
   ],
-  // this is an array of the plugins that we are including
+  // 含めるプラグインの配列
   plugins: [
     commonjs(),
     VuePlugin()
   ],
-  // ask rollup to not bundle Vue in the library
+  // ライブラリに Vue をバンドルしないように
   external: ['vue']
 }
 ```
 
-#### Configuring package.json
+#### package.json の設定
 
-To take advantage of our newly created `esm` module we need to add a few fields in our `package.json` file:
+新しく作成した `esm` モジュールを利用するためには、`package.json` ファイルにいくつかのフィールドを追加する必要があります:
 
 ```json
  "scripts": {
@@ -133,15 +133,15 @@ To take advantage of our newly created `esm` module we need to add a few fields
  ],
  ```
 
-Here we are specifying:
+ここで指定しています:
 
-- how to build our package
-- what files we want to bundle in our package
-- what file represents our `esm` module
+- パッケージのビルド方法
+- パッケージにバンドルするファイル
+- `esm` モジュールを示すファイル
 
-#### Bundling `umd` and `cjs` modules
+#### `umd` と `cjs` のバンドル
 
-To also build `umd` and `cjs` modules we can simply add a few lines of configuration to our `rollup.config.js` and `package.json`
+`umd` と `cjs` モジュールを一緒にビルドするには、`rollup.config.js` と `package.json` に数行の設定を追加するだけです。
 
 ##### rollup.config.js
 ```js

From 26ab4e30e486b793087c4819a6c4dc81e3f918fe Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naokie@users.noreply.github.com>
Date: Thu, 6 May 2021 20:18:53 +0900
Subject: [PATCH 8/8] fix: re-translate 'Here we are specifying'

Co-authored-by: kazuya kawaguchi <kawakazu80@gmail.com>
---
 src/guide/single-file-component.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md
index 5338c19f..a427e78d 100644
--- a/src/guide/single-file-component.md
+++ b/src/guide/single-file-component.md
@@ -133,7 +133,7 @@ export default {
  ],
  ```
 
-ここで指定しています:
+ここでは、以下の内容を指定しています:
 
 - パッケージのビルド方法
 - パッケージにバンドルするファイル