Мы очень близки к запуску 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 без необходимости чего-либо настраивать. . Это огромная сила, которую дает посылка с ее новой версией.
Всем спасибо и вот код! 💚