GitHub 👕 Store

🍰 Recipes

React

First we need to install the dependencies for React.

Blog Post

npm install --save react
npm install --save react-dom
npm install --save-dev parcel-bundler

Or if you have the optional Yarn package manager installed

yarn add react
yarn add react-dom
yarn add --dev parcel-bundler

Add Start script to package.json

// package.json
"scripts": {
  "start": "parcel index.html"
}

Preact

First we need to install the dependencies for Preact.

npm install --save preact
npm install --save preact-compat
npm install --save-dev parcel-bundler
npm install --save-dev babel-preset-preact

Or if you have the optional Yarn package manager installed

yarn add preact
yarn add preact-compat
yarn add --dev parcel-bundler
yarn add --dev babel-preset-preact

Then make sure the following Babel config is present.

// .babelrc
{
  "presets": [
    "preact"
  ]
}

Add Start script to package.json

// package.json
"scripts": {
  "start": "parcel index.html"
}

Vue

First we need to install the dependencies for Vue.

npm install --save vue
npm install --save-dev parcel-bundler

Or if you have the optional Yarn package manager installed

yarn add vue
yarn add --dev parcel-bundler

Add Start script to package.json

// package.json
"scripts": {
  "start": "parcel index.html"
}

Typescript

First we need to add Parcel and Typescript to our project.

npm install --save-dev typescript
npm install --save-dev parcel-bundler

Or if you have the optional Yarn package manager installed

yarn add typescript --dev
yarn add --dev parcel-bundler

Compiling from index.html

Add Start script to package.json

// package.json
"scripts": {
  "start": "parcel index.html"
}

Then, in your index.html file, simply reference your .ts file.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <!-- Here 👇 -->
    <script src="./myTypescriptFile.ts"></script>
</body>
</html>

Done!

Compiling the .ts file directly

Add Start script to package.json

// package.json
"scripts": {
  "start": "parcel myTypescriptFile.ts"
}

Done! 😄 Compiled .js file can be found inside the dist folder.

Help us improve the docs

If something is missing or not entirely clear, please file an issue on the website repository or edit this page.