소포 자원
Resources
Parcel은 리소스 기반입니다. 리소스는 모든 파일을 나타낼 수 있지만 Parcel은 JavaScript, CSS 및 HTML 파일과 같은 특정 유형의 리소스에 대한 특별한 지원을 제공합니다. Parcel은 이러한 파일에서 참조되는 종속성을 자동으로 분석하여 출력 번들에 포함합니다. 유사한 유형의 리소스는 동일한 출력 패키지로 그룹화됩니다. 다른 유형의 리소스를 가져오는 경우(예: JS에서 CSS 파일을 가져오는 경우) 새 하위 번들을 생성하고 상위 항목에 참조를 유지합니다. 이는 다음 섹션에서 예시됩니다.
JavaScript
웹 번들러(bundler) 가장 전통적인 파일 형식은 JavaScript입니다. Parcel은 파일 가져오기를 위한 CommonJS 및 ES6 모듈 구문을 지원합니다. 또한 모듈을 비동기적으로 로드하는 동적 import() 함수 구문을 지원합니다. 이에 대해서는 코드 분할 섹션에서 설명합니다.
// 使用 CommonJS 语法导入模块
const dep = require('./path/to/dep');
// 使用 ES6 import 语法导入模块
import dep from './path/to/dep';CSS나 이미지 파일과 같은 비JavaScript 리소스를 JavaScript 파일로 가져올 수도 있습니다. 이러한 파일 중 하나를 가져올 때 다른 번들러처럼 인라인이 아닙니다. 대신, 해당 항목과 모든 종속 항목이 단일 번들(예: CSS 파일)에 배치됩니다. CSS 모듈을 사용할 때 내보낸 클래스는 JavaScript 번들에 배치됩니다. 다른 리소스 유형은 URL을 JavaScript 패키지의 출력 파일로 내보내므로 코드에서 이를 참조할 수 있습니다.
// 导入一个 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 외에도 LESS, SASS, Stylus 등 다른 CSS로 컴파일된 언어도 지원되며 동일한 방식으로 작동합니다.
SCSS
SCSS 컴파일에는 node-sass 모듈이 필요합니다. npm을 사용하여 설치할 수 있습니다.
npm install node-sass
node-sass가 설치되면 JavaScript 파일에서 SCSS 파일을 가져올 수 있습니다.
import './custom.scss'
SCSS 파일의 종속성은 @import 문을 사용할 수 있습니다.
HTML
HTML 리소스는 일반적으로 Parcel에 제공하는 항목 파일이지만 예를 들어 다른 웹 페이지에 대한 링크를 제공하기 위해 JavaScript 파일에서 참조할 수도 있습니다. 스크립트, 스타일, 미디어 및 기타 HTML 파일의 URL은 위에서 설명한 대로 추출되고 컴파일됩니다. 인용문은 올바른 출력 파일에 연결되도록 HTML로 다시 작성됩니다. 모든 파일 이름은 현재 HTML 파일을 기준으로 해야 합니다.
<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>
