Skip to content

E2E Parcel

E2E Parcel #10771

#
on:
schedule:
- cron: '0 */4 * * *'
push:
branches:
- master
pull_request:
paths:
- .github/actions/prepare/action.yml
- .github/workflows/e2e-parcel-workflow.yml
- scripts/e2e-setup-ci.sh
name: 'E2E Parcel'
jobs:
chore:
name: 'Validating Parcel'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: ./.github/actions/prepare
- name: 'Running the integration test'
run: |
source scripts/e2e-setup-ci.sh
yarn init -p
yarn add -D parcel@nightly lodash @babel/core
# JavaScript
echo "import _ from 'lodash';function printHello() { console.log(_.join(['Hello', 'JS'], ' '))}; printHello();" | tee index.js
yarn parcel build index.js
[[ "$(node dist/index.js)" = "Hello JS" ]]
rm -rf dist index.js
# TypeScript (Babel)
echo "import * as _ from 'lodash';function printHello() { console.log(_.join(['Hello', 'TS'], ' '))}; printHello();" | tee index.ts
yarn parcel build index.ts
[[ "$(node dist/index.js)" = "Hello TS" ]]
rm -rf dist index.ts
# TypeScript (tsc)
yarn add -D @parcel/core@nightly @parcel/config-default@nightly @parcel/validator-typescript@nightly @types/lodash typescript
echo "{\"extends\": \"@parcel/config-default\", \"validators\": {\"*.{ts,tsx}\": [\"@parcel/validator-typescript\"]}}" | tee .parcelrc
echo "{\"compilerOptions\": { \"noImplicitAny\": true, \"removeComments\": true, \"preserveConstEnums\": true, \"sourceMap\": true}, \"include\": [\"index.ts\"]}" | tee tsconfig.json
echo "import * as _ from 'lodash';function printHello() { console.log(_.join(['Hello', 'TS'], ' '))}; printHello();" | tee index.ts
yarn parcel build index.ts
[[ "$(node dist/index.js)" = "Hello TS" ]]
rm -rf dist index.ts tsconfig.json .parcelrc
# Less
yarn add -D bootstrap-less less postcss @parcel/optimizer-cssnano@nightly @parcel/packager-css@nightly @parcel/transformer-css@nightly @parcel/transformer-less@nightly @parcel/transformer-postcss@nightly
mkdir src
echo "import './main.less';" | tee src/index.js
echo "@import 'bootstrap-less/bootstrap/index.less';@import './other.less';.box:extend(.hotpink) {width: 200px;height: 200px;}" | tee src/main.less
echo ".hotpink {background: hotpink;}" | tee src/other.less
yarn parcel build src/index.js
ls dist | grep "index.css"
rm -rf dist src
# Yaml
yarn add @parcel/transformer-yaml@nightly
echo "import data from './data.yaml';console.log(data.berry.works.with[0]);" | tee index.js
echo "berry: {works: {with: [Parcel]}}" | tee data.yaml
yarn parcel build index.js
[[ "$(node dist/index.js)" = "Parcel" ]]
rm -rf dist index.js data.yaml
# MDX
yarn add react react-dom react-select @mdx-js/mdx @mdx-js/react@^1 @parcel/transformer-mdx@nightly
echo "import page from './page.mdx'; console.log('MDX Built');" | tee index.js
cat > page.mdx <<EOT
import Select from 'react-select';
# Hello, *world*!
<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
<h3>This is JSX</h3>
</div>
<Select />
EOT
yarn parcel build index.js
[[ "$(node dist/index.js)" = "MDX Built" ]]
rm -rf dist index.js page.mdx
# Assets
echo "import 'url:./text.txt';" | tee index.js
echo "Hello World" | tee text.txt
yarn parcel build index.js
ls dist | grep ".txt"
rm -rf dist index.js text.txt
# Tree-shaking
echo "export function square(x) { return x * x } export function cube(x) { return x * x * x }" | tee math.js
echo "import { cube } from './math.js'; console.log(cube(5));" | tee index.js
yarn parcel build index.js
[[ "$(node dist/index.js)" = "125" ]]
! cat dist/index.js | grep "square"
rm -rf dist index.js math.js
# Multiple entry modules
mkdir src
echo "import hyperCube from './hyperCube.js'; console.log(hyperCube(5));" | tee src/main.js
echo "import cube from './cube.js'; console.log(cube(5));" | tee src/otherEntry.js
echo "import square from './square.js'; export default function cube(x) { return square(x) * x; }" | tee src/cube.js
echo "import cube from './cube.js'; export default function hyperCube(x) { return cube(x) * x; }" | tee src/hyperCube.js
echo "export default function square(x) { return x * x; }" | tee src/square.js
yarn parcel build src/main.js src/otherEntry.js
[[ "$(node dist/main.js)" = "625" ]]
[[ "$(node dist/otherEntry.js)" = "125" ]]
! cat dist/main.js | grep "cube"
! cat dist/otherEntry.js | grep "cube"
rm -rf dist src