|
2 | 2 |
|
3 | 3 | ## 前書き |
4 | 4 |
|
5 | | -多くの Vue プロジェクトでは、 グローバルコンポーネントは `app.mount('#app')` の後に各ページの body においてコンテナ要素のターゲットすることに続いて、`app.component()` を使用して定義されています。 |
| 5 | +多くの Vue プロジェクトでは、グローバルコンポーネントは `app.mount('#app')` の後に各ページの body においてコンテナ要素のターゲットすることに続いて、`app.component()` を使用して定義されています。 |
6 | 6 |
|
7 | 7 | これはある view を拡張するためだけに JavaScript が利用された中小規模のプロジェクトにおいてはとても有効です。しかしながら、あなたのフロントエンドで JavaScript 全体を操作するようなもっと複雑なプロジェクトでは、これらの点において不利益になります。: |
8 | 8 |
|
9 | 9 | - **グローバル宣言**は全てのコンポーネントに一意な名前を強制すること |
10 | 10 | - シンタックスハイライトがない**文字列テンプレート**と複数行 HTML の時の醜いスラッシュが強要されること |
11 | 11 | - **CSS サポート無し**だと HTML と JavaScript がコンポーネントにモジュール化されている間、これ見よがしに無視されること |
12 | | -- **ビルド処理がない**と Pug(前 Jade)と Babel のようなプリプロセッサよりむしろ、 HTML や ES5 JavaScript を制限されること |
| 12 | +- **ビルド処理がない**と Pug(前 Jade)と Babel のようなプリプロセッサよりむしろ、HTML や ES5 JavaScript を制限されること |
13 | 13 |
|
14 | 14 | これらは全ては Webpack や Browserify のビルドツールにより実現された `.vue`拡張子の**単一ファイルコンポーネント**によって解決されます。 |
15 | 15 |
|
|
23 | 23 | - [CommonJS モジュール](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module) |
24 | 24 | - [コンポーネントスコープ CSS](https://vue-loader.vuejs.org/en/features/scoped-css.html) |
25 | 25 |
|
26 | | -約束した通り、Pug、Babel (ES2015 モジュールと一緒に) や Stylus など 綺麗で機能が豊富なコンポーネントもプリプロセッサとして利用することができます。 |
| 26 | +約束した通り、Pug、Babel (ES2015 モジュールと一緒に) や Stylus など綺麗で機能が豊富なコンポーネントもプリプロセッサとして利用することができます。 |
27 | 27 |
|
28 | 28 | <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> |
29 | 29 |
|
30 | 30 | これらの特定の言語は単なる一例です。TypeScript、SCSS、PostCSS などの生産的なプリプロセッサも簡単に使うことができます。もし `vue-loader` で Webpack を使用しているならば、CSS Modules 向けに素晴らしいサポートがあります。 |
31 | 31 |
|
32 | 32 | ### 関心の分離について |
33 | 33 |
|
34 | | -注意すべき重要な点の１つは、**関心の分離がファイルタイプの分離とは等しくないことです。** 現代の UI 開発では、私たちはコードベースを互いに織りなす3つの巨大なレイヤーに分割するのではなく、それらを疎結合なコンポーネントに分割して構成する方がはるかに理にかなっていることを発見しました。コンポーネントの内部では、そのテンプレート、ロジック、スタイルが本質的に結合しており、実際にそれらを配置することでコンポーネントの一貫性と保守性が高くなります。 |
| 34 | +注意すべき重要な点の 1 つは、**関心の分離がファイルタイプの分離とは等しくないことです。** 現代の UI 開発では、私たちはコードベースを互いに織りなす 3 つの巨大なレイヤーに分割するのではなく、それらを疎結合なコンポーネントに分割して構成する方がはるかに理にかなっていることを発見しました。コンポーネントの内部では、そのテンプレート、ロジック、スタイルが本質的に結合しており、実際にそれらを配置することでコンポーネントの一貫性と保守性が高くなります。 |
35 | 35 |
|
36 | 36 | 単一ファイルコンポーネントのアイディアが好きではなくても、JavaScript と CSS を別々ファイルに分けることによってホットリロードとプリコンパイル機能を活用することができます: |
37 | 37 |
|
38 | | -``` html |
| 38 | +```html |
39 | 39 | <!-- my-component.vue --> |
40 | 40 | <template> |
41 | 41 | <div>This will be pre-compiled</div> |
|
48 | 48 |
|
49 | 49 | ### サンドボックスの例 |
50 | 50 |
|
51 | | -すぐに触ってそして単一ファイルコンポーネントを試したい方は、CodeSandBox 上の [この単純な todo アプリケーション](https://codesandbox.io/s/vue-todo-list-app-with-single-file-component-vzkl3?file=/src/App.vue) |
52 | | -をチェックしてみてください。 |
| 51 | +すぐに触ってそして単一ファイルコンポーネントを試したい方は、CodeSandBox 上の [この単純な todo アプリケーション](https://codesandbox.io/s/vue-todo-list-app-with-single-file-component-vzkl3?file=/src/App.vue) をチェックしてみてください。 |
53 | 52 |
|
54 | 53 | ### JavaScript でモジュールビルドシステムが初めてなユーザ向け |
55 | 54 |
|
56 | 55 | `.vue` コンポーネントにより、高度な JavaScript アプリケーションの分野へ入っていきます。 これはあなたがまだ使ったことのない、いくつかの追加のツールの使い方を学ぶことを意味します: |
57 | 56 |
|
58 | | -- **Node Package Manager (NPM)**: レジストリからパッケージを取得する方法については[Getting Started guide](https://docs.npmjs.com/packages-and-modules/getting-packages-from-the-registry) のセクションを読んでください。 |
| 57 | +- **Node Package Manager (npm)**: レジストリからパッケージを取得する方法については[Getting Started guide](https://docs.npmjs.com/packages-and-modules/getting-packages-from-the-registry) のセクションを読んでください。 |
59 | 58 |
|
60 | 59 | - **ES2015/16 を使ったモダンな JavaScript**: Babel の [Learn ES2015 guide](https://babeljs.io/docs/en/learn)を読んでみてください。今すぐには全ての機能を暗記する必要はないですが、参考として戻れるようにしておいてください。 |
61 | 60 |
|
62 | | -これらのリソースに没頭した後は、[Vue CLI](https://cli.vuejs.org/)を確認することをお勧めします。 指示に従うことであっという間に `.vue` コンポーネントと ES2015、 Webpack、ホットリローティングを備えた Vue プロジェクトを手に入れられるはずです！ |
| 61 | +これらのリソースに没頭した後は、[Vue CLI](https://cli.vuejs.org/)を確認することをお勧めします。 指示に従うことであっという間に `.vue` コンポーネントと ES2015、Webpack、ホットリローティングを備えた Vue プロジェクトを手に入れられるはずです！ |
63 | 62 |
|
64 | 63 | ### 上級ユーザ向け |
65 | 64 |
|
66 | 65 | CLI はツールの設定の大部分の面倒を見てくれますが、[設定オプション](https://cli.vuejs.org/config/)を通してよりきめ細かいカスタマイズをすることもできます。 |
67 | 66 |
|
68 | 67 | あなたが独自のビルドセットアップをゼロから作ることを好む場合、webpack と [vue-loader](https://vue-loader.vuejs.org)を手動で設定する必要があるでしょう。webpack についてもっと学びたいときは、[公式ドキュメント](https://webpack.js.org/configuration/)や [webpack learning academy](https://webpack.academy/p/the-core-concepts)を参照してください。 |
| 68 | + |
| 69 | +### Rollup でビルド |
| 70 | + |
| 71 | +ほとんどの場合、サードパーティのライブラリを開発するときは、そのライブラリの利用者が [Tree Shaking](https://webpack.js.org/guides/tree-shaking/) できるような方法でビルドしたいと考えています。Tree Shaking を有効にするためには、`esm` モジュールをビルドする必要があります。 Webpack や Vue CLI は `esm` モジュールのビルドをサポートしていないため、[Rollup](https://rollupjs.org/) の依存が必要です。 |
| 72 | + |
| 73 | +#### Rollup のインストール |
| 74 | + |
| 75 | +Rollup といくつかの依存関係をインストールする必要があります: |
| 76 | + |
| 77 | +```bash |
| 78 | +npm install --save-dev rollup @rollup/plugin-commonjs rollup-plugin-vue |
| 79 | +``` |
| 80 | + |
| 81 | +これらは `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) を追加できます。 |
| 82 | + |
| 83 | +#### Rollup の設定 |
| 84 | + |
| 85 | +Rollup でビルドを設定するには、プロジェクトのルートに `rollup.config.js` ファイルを作成する必要があります: |
| 86 | + |
| 87 | +```bash |
| 88 | +touch rollup.config.js |
| 89 | +``` |
| 90 | + |
| 91 | +ファイルを作成したら、お好きなエディタで開き、以下のコードを追加します。 |
| 92 | + |
| 93 | +```js |
| 94 | +// サードパーティのプラグインをインポート |
| 95 | +import commonjs from 'rollup-plugin-commonjs' |
| 96 | +import VuePlugin from 'rollup-plugin-vue' |
| 97 | +import pkg from './package.json' // 名前を再利用するために package.json ファイルをインポート |
| 98 | + |
| 99 | +export default { |
| 100 | + // エクスポートされたすべてのコンポーネントや関数を含むファイル |
| 101 | + input: 'src/index.js', |
| 102 | + // 出力されるフォーマットの配列 |
| 103 | + output: [ |
| 104 | + { |
| 105 | + file: pkg.module, // esm ライブラリの名前 |
| 106 | + format: 'esm', // フォーマットの選択 |
| 107 | + sourcemap: true, // ソースマップを含めるか |
| 108 | + } |
| 109 | + ], |
| 110 | + // 含めるプラグインの配列 |
| 111 | + plugins: [ |
| 112 | + commonjs(), |
| 113 | + VuePlugin() |
| 114 | + ], |
| 115 | + // ライブラリに Vue をバンドルしないように |
| 116 | + external: ['vue'] |
| 117 | +} |
| 118 | +``` |
| 119 | + |
| 120 | +#### package.json の設定 |
| 121 | + |
| 122 | +新しく作成した `esm` モジュールを利用するためには、`package.json` ファイルにいくつかのフィールドを追加する必要があります: |
| 123 | + |
| 124 | +```json |
| 125 | + "scripts": { |
| 126 | + ... |
| 127 | + "build": "rollup -c rollup.config.js", |
| 128 | + ... |
| 129 | + }, |
| 130 | + "module": "dist/my-library-name.esm.js", |
| 131 | + "files": [ |
| 132 | + "dist/", |
| 133 | + ], |
| 134 | + ``` |
| 135 | + |
| 136 | +ここでは、以下の内容を指定しています: |
| 137 | + |
| 138 | +- パッケージのビルド方法 |
| 139 | +- パッケージにバンドルするファイル |
| 140 | +- `esm` モジュールを示すファイル |
| 141 | + |
| 142 | +#### `umd` と `cjs` のバンドル |
| 143 | + |
| 144 | +`umd` と `cjs` モジュールを一緒にビルドするには、`rollup.config.js` と `package.json` に数行の設定を追加するだけです。 |
| 145 | + |
| 146 | +##### rollup.config.js |
| 147 | +```js |
| 148 | +output: [ |
| 149 | + ... |
| 150 | + { |
| 151 | + file: pkg.main, |
| 152 | + format: 'cjs', |
| 153 | + sourcemap: true, |
| 154 | + }, |
| 155 | + { |
| 156 | + file: pkg.unpkg, |
| 157 | + format: 'umd', |
| 158 | + name: 'MyLibraryName', |
| 159 | + sourcemap: true, |
| 160 | + globals: { |
| 161 | + vue: 'Vue', |
| 162 | + }, |
| 163 | + }, |
| 164 | +] |
| 165 | +``` |
| 166 | +##### package.json |
| 167 | +```json |
| 168 | +"module": "dist/my-library-name.esm.js", |
| 169 | +"main": "dist/my-library-name.cjs.js", |
| 170 | +"unpkg": "dist/my-library-name.global.js", |
| 171 | +``` |
0 commit comments