Parcel resources

Resources
Parcel is resource based. Resources can represent any file, but Parcel has special support for specific types of resources such as JavaScript, CSS, and HTML files. Parcel automatically analyzes dependencies referenced in these files and includes them into the output bundle. Resources of similar types are grouped together into the same output package. If you import a different type of resource (for example, if you import a CSS file in JS), it creates a new sub-bundle and keeps a reference in the parent. This will be exemplified in the following section.
JavaScript
Web bundler (bundler) The most traditional file type is JavaScript. Parcel supports CommonJS and ES6 module syntax for importing files. It also supports dynamic import() function syntax to load modules asynchronously, which is discussed in the Code Splitting section.

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

You can also import non-JavaScript resources, such as CSS and even image files, in JavaScript files. When you import one of these files, it's not inline like some other bundlers. Instead, it and all its dependencies are placed in a single bundle (such as a CSS file). When using CSS Modules, exported classes are placed in JavaScript bundles. Other resource types will export a URL to the output file of the JavaScript package, so you can reference them in your code.

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

If you want to have a file inline into a JavaScript bundle rather than referenced via a URL, you can do this using the fs.readFileSync API in Node.js. The URL must be statically analyzable, which means it cannot have any variables (except __dirname and __filename).

import fs from 'fs';
// 以字符串形式读取内容 
const string = fs.readFileSync(__dirname + '/test.txt', 'utf8');
// 以 缓冲区(Buffer)形式读取内容
const buffer = fs.readFileSync(__dirname + '/test.png');

CSS
CSS resources can be imported in JavaScript or HTML files, and can include referenced dependencies via the @import syntax, as well as via The url() function references images, fonts, etc. Other @imported CSS files are inlined into the same CSS bundle, and url() references are rewritten to their output file names. All file names should be relative to the current CSS file.

/* 导入另一个 CSS 文件 */
@import './other.css';
.test {
  /* 引用一个 image 文件 */
  background: url('./images/background.png');
}

In addition to pure CSS, other languages compiled into CSS are also supported, such as LESS, SASS and Stylus, and work in the same way.
SCSS
SCSS compilation requires the node-sass module. You can install it using npm:

npm install node-sass

Once node-sass is installed, you can import the SCSS file in your JavaScript file.

import './custom.scss'

Dependencies in SCSS files can use the @import statement.
HTML
HTML resources are usually the entry files you provide to Parcel, but can also be referenced by JavaScript files, for example, to provide links to other web pages. URLs for scripts, styles, media and other HTML files are extracted and compiled as described above. Quotes are rewritten into HTML so that they link to the correct output file. All file names should be relative to the current HTML file.

<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>

Parcel resources

php.cn