Мы очень близки к запуску Parcel версии 2, и мы уже можем видеть в бета-версиях большие улучшения, которые она имеет.

Приступим к тестированию новой версии.

Мы собираемся создать простой приветственный мир

mkdir parcel-2-test && cd parcel-2-test

Затем инициализируйте новый проект пряжи и установите посылку 2.

yarn init && yarn add --dev parcel@next

Создайте каталог src внутри файла index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My First Parcel App</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Попробуй! 🚀

yarn parcel src/index.html

Теперь у вас будет сервер, работающий по адресу http: // localhost: 1234.

Добавить поддержку CSS

Создайте файл styles.css

h1 {
  color: green;
}

и добавлен в файл HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My First Parcel App</title>
    <link rel="stylesheet" href="./styles.css" />
    ...

Попробуй! 🚀

yarn parcel src/index.html

Вуаля 🌟

Добавить поддержку SCSS

Переименуйте styles.css в styles.scss.

<link rel="stylesheet" href="./styles.scss" />

И добавить несколько стилей

$color: green;
body {
  padding: 20px;
  h1 {
    color: $color;
  }
}

Попробуй! 🚀

yarn parcel src/index.html

Вуаля 🌟

Добавить поддержку Javascript es6 +

Создайте файл app.js

import { hello } from "./hello"
console.log(hello("Fran"))

И hello.js

export const hello = name => `Hello ${name}`;

и добавлен в файл HTML

    ...
    <script src="app.js"></script>  
    </body>
</html>

Попробуй! 🚀

yarn parcel src/index.html

Вуаля 🌟

Добавить поддержку Typescript

Переименуйте app.js и hello.js в app.ts и hello.ts.

hello.ts

interface Person {
  firstName: string;
  lastName: string;
}
export const hello = (person: Person) => {
  return `Hello ${person.firstName} ${person.lastName}`;
}

app.ts

import { hello } from './hello';
let user = { firstName: "Franco", lastName: "Meriles" };
console.log(hello(user))

Попробуй! 🚀

yarn parcel src/index.html

Вуаля 🌟

Добавить React

Установите React и React-dom

yarn add --save react react-dom

Переименуйте app.ts в app.tsx.

Создайте Counter.tsx

import React, { useState } from "react";
const Counter = () => {
  const [count, setCount] = useState(0);
return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export default Counter

И добавляем в app.tsx

import ReactDOM from "react-dom";
import React from "react"
import Counter from "./Counter"
import { hello } from './hello';
let user = { firstName: "Franco", lastName: "Meriles" };
console.log(hello(user))
ReactDOM.render(<Counter />, document.querySelector('#app'))

Создайте div с идентификатором app в HTML, а также измените src на app.tsx

    ...
    <div id="app"></div>
  </body>
  <script src="app.tsx"></script>
</html>

Попробуй! 🚀

yarn parcel src/index.html

Вуаля 🌟

Построить проект

yarn parcel build src/index.html

Эта команда по умолчанию создает папку dist с вашим скомпилированным кодом.

Попробуй! 🚀

npx http-server dist

Действительно из коробки 💥

Как видите, у нас есть проект с поддержкой Scss Typescript JS ES6 + и React без необходимости чего-либо настраивать. . Это огромная сила, которую дает посылка с ее новой версией.

Всем спасибо и вот код! 💚