Question

支援的副档名：js、jsx、es6、jsm 及 mjs

网页打包工具中最传统的档案类型就是 JavaScript 了，Parcel 支援 CommonJS 及 ES6 的模组汇入语法，也支援非同步载入的动态的 import() 函式，详情请见程式码分离一章。另外动态载入也可从 URL 载入模组。

// 使用 CommonJS 语法汇入模组
const dep = require('./path/to/dep')

// 使用 ES6 汇入语法汇入模组
import dep from './path/to/dep'

// 从 URL （如 CDN）动态载入模组
import('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js').then(() => {
  console.log(_.VERSION);
});

你也可以在 JavaScript 中汇入非 JavaScript 的档案，像是 CSS、HTML 甚至是影像档。当你汇入这些档案时，Parcel 会将所有的相依档案放在另外的 bundle，不像其他打包工具将档案直接插入于行内。

当你使用 CSS Modules 时，汇出的类别将会置于 JavaScript bundle 内。

其余的资源类型会在 JavaScript bundle 中汇出一个 URL ，好让你可以在程式码中引用这些输出的档案。

// 汇入 CSS 档案
import './test.css'

// 由 CSS 模组汇入 CSS 档
import classNames from './test.css'

// 由 URL 汇入影像档
import imageURL from './test.png'

// 汇入 HTML 档案
import('./some.html')
// 或者：
import html from './some.html'
// 也可以这样：
require('./some.html')

若你不想使用 URL 引入档案，而是将档案直接插入于行内的话，你可以透过 Node.js 的 fs.readFileSync API 来达成。 其中的 URL 必须是静态可分析，意即 URL 不能包含除了 __dirname 及 __filename 以外的任何变数。

import fs from 'fs'

// 将档案内容读取为文字
const string = fs.readFileSync(__dirname + '/test.txt', 'utf8')

// 将档案内容读取为 Buffer
const buffer = fs.readFileSync(__dirname + '/test.png')

// 将 Buffer 内容转换为影像
;<img src={`data:image/png;base64,${buffer.toString('base64')}`} />

在 JSX 中使用影像档

下列是在 JSX 中汇入影像档的範例：

// 汇入影像档
import megaMan from "./images/mega-man.png";

// JSX
<img src={megaMan} title="Mega Man" alt="Mega Man" />

// JSX (使用自订路径)
<img src={`/dist${megaMan}`} title="Mega Man" alt="Mega Man" />

Babel 是款热门且拥有庞大外挂生态系的 JavaScript 转译器。其使用方式跟直接执行或在其他打包工具中相同。

在你的 app 中安装 preset 和外挂：

yarn add --dev babel-preset-react

接着建立 .babelrc：

{
  "presets": ["@babel/preset-react"]
}

你也可以在 package.json 中指定 babel 设定

"babel": {
  "presets": ["@babel/preset-react"]
}

注意：package.json 优先度大于 .babelrc。

预设的 Babel 转换

Parcel 预设使用 @babel/preset-env 并转译你的程式码（包含每个内部模组）以符合目标定义。

Parcel 会使用 browserslist 来处理 browser 环境。browserlist 的目标设定可在 package.json（engines.browsers 或 browserslist）中定义，或是使用设定档 (browserslist 或 .browserslistrc) 来定义。

browserlist 预设的支援目标为 > 0.25%，也就是那些用户多于 0.25% 的浏览器。

针对 node 环境，Parcel 则使用 package.json 中的 engines.node 设定值，此设定预设为 node 8。

flow 是款 JavaScript 的静态类型检查工具。在 Parcel 中使用 Flow 相当容易，只要将 // @flow 置于你的 js 档案的第一行即可。

Parcel 会自动安装必要的 Babel 设定档以将 Flow 类别从编译后的输出档中剥离，因此你什幺都不需要担心，除了两件事：编辑器整合及利用 .flowconfig 来支援绝对路径的解析。