🍰 秘方
React
首先我們需要安裝 React 的相依套件。
npm install --save react
npm install --save react-dom
npm install --save-dev parcel-bundler或者你也可以使用 Yarn 安裝
yarn add react
yarn add react-dom
yarn add --dev parcel-bundler在 package.json 中加入啟動指令
// package.json
"scripts": {
"start": "parcel index.html"
}Preact
首先我們需要安裝 Preact 的相依套件。
npm install --save preact
npm install --save-dev parcel-bundler或者是你想使用 Yarn 來管理套件
yarn add preact
yarn add --dev parcel-bundler接著在 package.json 中加入啟動指令
// package.json
"scripts": {
"start": "parcel index.html"
}Vue
首先我們需要安裝 Vue 的相依套件。
npm install --save vue
npm install --save-dev parcel-bundler或者是你想使用 Yarn 來管理套件
yarn add vue
yarn add --dev parcel-bundler在 package.json 中加入啟動指令
// package.json
"scripts": {
"start": "parcel index.html"
}TypeScript
首先我們將 Parcel 及 TypeScript 加入至專案。
npm install --save-dev typescript
npm install --save-dev parcel-bundler或者你想使用 yarn 來安裝
yarn add --dev typescript
yarn add --dev parcel-bundler由 index.html 進行編譯
將啟動指令加入 package.json
// package.json
"scripts": {
"start": "parcel index.html"
}接著在你的 index.html 中引用你的 .ts 檔案即可。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- 這裡 👇 -->
<script src="./myTypescriptFile.ts"></script>
</body>
</html>搞定！
直接編譯 .ts 檔案
將啟動指令加入 package.json
// package.json
"scripts": {
"start": "parcel myTypescriptFile.ts"
}搞定！編譯過的 .js 檔案將會在 dist 目錄中。
Bootstrap + FontAwesome
首先需要安裝 Bootstrap 及 FontAwesome 的相依套件。
npm install bootstrap jquery popper.js
npm install --save-dev parcel-bundler @fortawesome/fontawesome-free或者你也可以使用 Yarn 安裝
yarn add bootstrap jquery popper.js
yarn add --dev parcel-bundler @fortawesome/fontawesome-free在 package.json 中加入啟動指令
// package.json
"scripts": {
"start": "parcel index.html"
}匯入 Bootstrap 及預先編譯的樣式
建立一個 JavaScript 檔案作為 app 進入點，接著匯入任何必要的相依套件。
// main.js
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css' // 匯入預先編譯的 Bootstrap CSS
import '@fortawesome/fontawesome-free/css/all.css'然後在你的 index.html 中加入 JavaSctipt 進入點。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- 這裡 👇 -->
<script src="./main.js"></script>
</body>
</html>搞定！
自訂 Bootstrap 樣式
若你想自訂 Bootstrap 樣式的話，可以建立一個 .scss 進入點，並引入 Bootstrap 樣式源碼。
// main.scss
@import "~bootstrap/scss/bootstrap";接著建立一個 JavaScript 檔案作為 app 進入點，並匯入任何必要的相依套件。
// main.js
import 'bootstrap'
import '@fortawesome/fontawesome-free/css/all.css'
import './main.scss' // 匯入剛建立的 scss 檔案然後在你的 index.html 中加入 JavaSctipt 進入點。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- 這裡 👇 -->
<script src="./main.js"></script>
</body>
</html>搞定！
Svelte
首先我們需要安裝 Svelte 的相依套件。
npm install --save-dev svelte
npm install --save-dev parcel-plugin-svelte
npm install --save-dev parcel-bundler或者你也可以使用 Yarn 安裝
yarn add --dev svelte
yarn add --dev parcel-plugin-svelte
yarn add --dev parcel-bundler從 index.html 編譯
在 package.json 中加入啟動指令
// package.json
"scripts": {
"start": "parcel src/index.html"
}然後在你的 index.html 中加入 JavaSctipt 進入點。
<!-- .src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Svelte App</title>
</head>
<body>
<!-- 這裡 👇 -->
<script src="./src/main.js"></script>
</body>
</html>搞定！
協助我們讓本文件更加完善
若有什麼內容遺漏了或是敘述不清楚的地方，請在本站的 repository 中開啟一個 issue 或者編輯此頁面。