Sumber bungkusan
Sumber
Parcel adalah berasaskan sumber. Sumber boleh mewakili mana-mana fail, tetapi Parcel mempunyai sokongan khas untuk jenis sumber tertentu seperti fail JavaScript, CSS dan HTML. Parcel secara automatik menganalisis kebergantungan yang dirujuk dalam fail ini dan memasukkannya ke dalam berkas keluaran. Sumber jenis yang serupa dikumpulkan bersama ke dalam pakej keluaran yang sama. Jika anda mengimport jenis sumber yang berbeza (contohnya, jika anda mengimport fail CSS dalam JS), ia mencipta sub-himpunan baharu dan menyimpan rujukan dalam induk. Ini akan dicontohi dalam bahagian berikut.
JavaScript
Web bundler (bundler) Jenis fail yang paling tradisional ialah JavaScript. Parcel menyokong sintaks modul CommonJS dan ES6 untuk mengimport fail. Ia juga menyokong sintaks fungsi import() dinamik untuk memuatkan modul secara tidak segerak, yang dibincangkan dalam bahagian Pemisahan Kod.
// 使用 CommonJS 语法导入模块
const dep = require('./path/to/dep');
// 使用 ES6 import 语法导入模块
import dep from './path/to/dep';Anda juga boleh mengimport sumber bukan JavaScript, seperti CSS dan juga fail imej, dalam fail JavaScript. Apabila anda mengimport salah satu daripada fail ini, ia tidak sebaris seperti beberapa berkas lain. Sebaliknya, ia dan semua kebergantungannya diletakkan dalam satu berkas (seperti fail CSS). Apabila menggunakan Modul CSS, kelas yang dieksport diletakkan dalam berkas JavaScript. Jenis sumber lain akan mengeksport URL ke fail output pakej JavaScript, jadi anda boleh merujuknya dalam kod anda.
// 导入一个 CSS 文件 import './test.css'; // 通过 CSS modules 导入一个 CSS 文件 import classNames from './test.css'; // 通过URL 导入一个 image 文件 import imageURL from './test.png';
Jika anda ingin menyelaraskan fail ke dalam berkas JavaScript dan bukannya merujuknya melalui URL, anda boleh melakukannya menggunakan API fs.readFileSync dalam Node.js. URL mestilah boleh dianalisis secara statik, yang bermaksud ia tidak boleh mempunyai sebarang pembolehubah (kecuali __dirname dan __filename).
import fs from 'fs'; // 以字符串形式读取内容 const string = fs.readFileSync(__dirname + '/test.txt', 'utf8'); // 以 缓冲区(Buffer)形式读取内容 const buffer = fs.readFileSync(__dirname + '/test.png');
CSS
Sumber CSS boleh diimport dalam fail JavaScript atau HTML, dan boleh memasukkan kebergantungan yang dirujuk melalui sintaks @import, serta imej rujukan, fon, dsb. melalui fungsi url(). Fail CSS @imported lain diselaraskan ke dalam berkas CSS yang sama dan rujukan url() ditulis semula pada nama fail outputnya. Semua nama fail hendaklah relatif kepada fail CSS semasa.
/* 导入另一个 CSS 文件 */
@import './other.css';
.test {
/* 引用一个 image 文件 */
background: url('./images/background.png');
}Selain CSS tulen, bahasa kompilasi-ke-CSS lain seperti LESS, SASS dan Stylus juga disokong dan berfungsi dengan cara yang sama.
SCSS
Kompilasi SCSS memerlukan modul nod-sass. Anda boleh memasangnya menggunakan npm:
npm install node-sass
Setelah node-sass dipasang, anda boleh mengimport fail SCSS dalam fail JavaScript anda.
import './custom.scss'
Pergantungan dalam fail SCSS boleh menggunakan pernyataan @import.
HTML
Sumber HTML biasanya ialah fail entri yang anda berikan kepada Parcel, tetapi boleh juga dirujuk oleh fail JavaScript, contohnya, untuk menyediakan pautan ke halaman web lain. URL untuk skrip, gaya, media dan fail HTML lain diekstrak dan disusun seperti yang diterangkan di atas. Petikan ditulis semula ke dalam HTML supaya ia dipautkan ke fail output yang betul. Semua nama fail hendaklah relatif kepada fail HTML semasa.
<html> <body> <!-- 引用一个 image 文件 --> <img src="./images/header.png"> <a href="./other.html">Link to another page</a> <!-- 导入一个 JavaScript 包 --> <script src="./index.js"></script> </body> </html>
