Parcel资源

收藏727

阅读16437

更新时间2022-04-20

资源
Parcel 基于资源的。资源可以代表任何文件,但 Parcel 对 JavaScript ,CSS 和 HTML 文件等特定类型的资源有特殊的支持。Parcel 自动分析这些文件中引用的依赖关系,并将其包含到 输出包(output bundle) 中。相似类型的资源被组合在一起成为相同的输出包。如果您导入不同类型的资源(例如,如果你在 JS 中导入了一个 CSS 文件),它新建一个子包,并在父级中保留一个引用。这将在下面的部分中进行举例说明。
JavaScript
Web 打包器(bundler) 最传统的文件类型是 JavaScript 。Parcel 支持 CommonJS 和 ES6 模块语法来导入文件。它还支持动态 import() 函数语法来异步加载模块,这在 代码拆分 部分讨论。

// 使用 CommonJS 语法导入模块
const dep = require('./path/to/dep');
// 使用 ES6 import 语法导入模块
import dep from './path/to/dep';

你还可以在 JavaScript 文件导入非 JavaScript 资源, 例如 CSS ,甚至图像文件。当您导入其中一个文件时,它不像其他一些 打包器(bundler) 一样内联的。相反,它及其所有依赖项被放置在一个单独的包(bundle)(例如一个 CSS 文件)中。当使用 CSS Modules 时,导出的类被放置在 JavaScript 包中。其他资源类型将导出一个 URL 到 JavaScript 包的输出文件中,所以你可以在你的代码中引用它们。

// 导入一个 CSS 文件
import './test.css';
// 通过 CSS modules 导入一个 CSS 文件
import classNames from './test.css';
// 通过URL 导入一个 image 文件 
import imageURL from './test.png';

如果你想将文件内联到 JavaScript 包中,而不是通过 URL 引用,你可以使用 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() 函数引用图像,字体等。其他的 @import 的 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 的入口文件,但也可以被 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>

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号