소포 변환
Conversion
많은 번들러가 리소스를 변환하려면 플러그인을 설치하고 구성해야 하지만 Parcel에는 즉시 사용할 수 있는 많은 내장 변환 및 번역기가 있습니다. Babel을 사용하면 JavaScript, PostCSS를 사용하는 CSS, PostHTML을 사용하는 HTML을 변환할 수 있습니다. Parcel은 구성 파일(예: .babelrc , .postcssrc )이 모듈에서 발견되면 자동으로 이러한 변환을 실행합니다.
이 기능은 타사 node_modules에서도 작동합니다. 구성 파일이 패키지의 일부로 게시되면 변환이 자동으로 켜지고 해당 모듈에만 적용됩니다. 변환이 필요한 모듈만 처리하기 때문에 빠르게 패키징이 가능합니다. 이는 또한 특정 파일을 포함하거나 제외하도록 변환을 수동으로 구성할 필요가 없으며, 애플리케이션에서 이를 사용하기 위해 타사 코드가 어떻게 작성되는지 알 필요가 없음을 의미합니다.
Babel
Babel은 광범위한 플러그인 생태계를 갖춘 인기 있는 JavaScript 트랜스파일러입니다. Babel을 Parcel과 함께 단독으로 사용하거나 다른 패키저와 함께 사용하는 것과 동일한 방식으로 사용합니다.
애플리케이션에 사전 설정 및 플러그인 설치:
yarn add babel-preset-env
그런 다음 .babelrc 파일을 만듭니다.
{
"presets": ["env"]
}PostCSS
PostCSS는 autoprefixer, cssnext 및 CSS 모듈과 같은 플러그인으로 CSS를 변환하는 도구입니다. . .postcssrc(JSON), .postcssrc.js 또는 postcss.config.js 이름 중 하나를 사용하여 구성 파일을 생성하여 Parcel에서 PostCSS 구성을 사용하도록 할 수 있습니다.
애플리케이션에 플러그인을 설치합니다.
yarn add postcss-modules autoprefixer
그런 다음 , .postcssrc 파일을 생성합니다:
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
}
}
}플러그인은 플러그인 개체의 키에 지정되며 옵션 정의는 개체 값을 사용합니다. 플러그인에 옵션이 없으면 true로 설정하세요.
Autoprefixer, cssnext 및 기타 도구의 대상 브라우저는 .browserslistrc 파일에서 지정할 수 있습니다.
> 1% last 2 versions
CSS 모듈은 최상위 모듈 키를 사용하여 약간 다르게 활성화됩니다. Parcel은 JavaScript 번들에 포함할 객체를 내보내므로 CSS 모듈에 대한 특별한 지원이 필요하기 때문입니다. 프로젝트에 postcss-modules을 설치해야 한다는 점에 유의하세요.
PostHTML
PostHTML은 플러그인을 사용하여 HTML을 변환하는 도구입니다. .posthtmlrc(JSON), posthtmlrc.js 또는 posthtml.config.js 이름 중 하나를 사용하여 구성 파일을 생성하여 PostHTML을 사용하도록 Parcel을 구성할 수 있습니다.
애플리케이션에 플러그인을 설치합니다.
yarn add posthtml-img-autosize
그런 다음, .posthtmlrc 파일을 만듭니다:
{
"plugins": {
"posthtml-img-autosize": {
"root": "./images"
}
}
}플러그인은 플러그인 객체의 키에 지정되며, 옵션 정의는 객체 값을 사용합니다. 플러그인에 옵션이 없으면 true로 설정하세요.
TypeScript
TypeScript는 일반 JavaScript로 컴파일할 수 있는 JavaScript 유형의 상위 집합이며 최신 ES2015+ 기능도 지원합니다. TypeScript는 별도의 설정 없이 변환이 가능합니다.
<!-- index.html --> <html> <body> <script src="./index.ts"></script> </body> </html> // index.ts import message from "./message"; console.log(message); // message.ts export default "Hello, world";
