小包リソース
リソース
パーセルはリソースベースです。リソースは任意のファイルを表すことができますが、Parcel は JavaScript、CSS、HTML ファイルなどの特定の種類のリソースを特別にサポートしています。 Parcel は、これらのファイルで参照されている依存関係を自動的に分析し、出力バンドルに含めます。同様のタイプのリソースは、同じ出力パッケージにグループ化されます。異なるタイプのリソースをインポートする場合 (たとえば、JS で CSS ファイルをインポートする場合)、新しいサブバンドルが作成され、親に参照が保持されます。これについては次のセクションで例示します。
JavaScript
Web バンドラー (バンドラー) 最も伝統的なファイル タイプは JavaScript です。 Parcel は、ファイルをインポートするための CommonJS および ES6 モジュール構文をサポートしています。また、モジュールを非同期的にロードするための動的な import() 関数構文もサポートしています。これについては、「コード分割」セクションで説明します。
// 使用 CommonJS 语法导入模块
const dep = require('./path/to/dep');
// 使用 ES6 import 语法导入模块
import dep from './path/to/dep';CSS や画像ファイルなどの JavaScript 以外のリソースを JavaScript ファイルにインポートすることもできます。これらのファイルのいずれかをインポートする場合、他のバンドラーとは異なり、インラインではありません。代わりに、それとそのすべての依存関係は 1 つのバンドル (CSS ファイルなど) に配置されます。 CSS モジュールを使用する場合、エクスポートされたクラスは JavaScript バンドルに配置されます。他のリソース タイプは、JavaScript パッケージの出力ファイルに URL をエクスポートするため、コード内でそれらを参照できます。
// 导入一个 CSS 文件 import './test.css'; // 通过 CSS modules 导入一个 CSS 文件 import classNames from './test.css'; // 通过URL 导入一个 image 文件 import imageURL from './test.png';
ファイルを URL 経由で参照するのではなく、JavaScript バンドルにインライン化したい場合は、Node.js の fs.readFileSync API を使用してこれを行うことができます。 URL は静的に分析可能である必要があります。つまり、変数を含めることはできません (__dirname と __filename を除く)。
import fs from 'fs'; // 以字符串形式读取内容 const string = fs.readFileSync(__dirname + '/test.txt', 'utf8'); // 以 缓冲区(Buffer)形式读取内容 const buffer = fs.readFileSync(__dirname + '/test.png');
CSS
CSS リソースは JavaScript または HTML ファイルにインポートでき、@import 構文を使用して参照された依存関係を含めることもできます。 url() 関数は画像、フォントなどを参照します。他の @imported CSS ファイルは同じ CSS バンドルにインライン化され、url() 参照は出力ファイル名に書き換えられます。すべてのファイル名は、現在の CSS ファイルからの相対名である必要があります。
/* 导入另一个 CSS 文件 */
@import './other.css';
.test {
/* 引用一个 image 文件 */
background: url('./images/background.png');
}純粋な CSS に加えて、CSS にコンパイルされた他の言語 (LESS、SASS、Stylus など) もサポートされており、同様に機能します。
SCSS
SCSS のコンパイルには、node-sass モジュールが必要です。 npm を使用してインストールできます:
npm install node-sass
node-sass がインストールされたら、JavaScript ファイルに SCSS ファイルをインポートできます。
import './custom.scss'
SCSS ファイルの依存関係では @import ステートメントを使用できます。
HTML
HTML リソースは通常、Parcel に提供するエントリ ファイルですが、他の Web ページへのリンクを提供するなど、JavaScript ファイルによって参照することもできます。 。スクリプト、スタイル、メディア、その他の HTML ファイルの URL は、上記のように抽出され、コンパイルされます。引用符は HTML に書き換えられ、正しい出力ファイルにリンクされます。すべてのファイル名は、現在の HTML ファイルからの相対名である必要があります。
