一、快速开始
1.1 通过 Yarn 或者 npm 安装 Parcel
Yarn
yarn global add parcel-bundler
npm
npm install -g parcel-bundler
1.2 在你正在使用的项目目录下创建一个 package.json 文件
yarn init -y
or
npm init -y
1.3 创建一个 index.html 和 index.js 文件
index.html
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
index.js
console.log('hello world')
1.4 运行 parcel index.html
1.5多个文件入口
假设你有超过一个的入口文件，比如是index.html and about.html，你有两种方式来打包：
指定当前文件的名字：
parcel index.html about.html
使用 tokens 并创建一个 glob：
parcel ./**/*.html
注意: 假设你的文件目录结构如下:
- folder-1
-- index.html
- folder-2
-- index.html
打开 http://localhost:1234/folder-1/ 是不行的，
反而你需要显式地指向文件 http://localhost:1234/folder-1/index.html。
二、添加 parcel 到你的项目
有时全局安装 Parcel 是不可能的。举个例子，假如你正在构建其他人的 build agent 或者你想使用 CI 以编程的方式构建你的项目。如果这样，你可以将 Parcel 作为本地包安装并运行。
2.1 安装
Yarn 方式安装：
yarn add parcel-bundler --dev
NPM 方式安装：
npm install parcel-bundler --save-dev
2.2 通过修改你的package.json来添加这些任务脚本
{
"scripts": {
"dev": "parcel <your entry file>",
"build": "parcel build <your entry file>"
}
}
2.3 运行
# 以开发模式运行
yarn dev
# 或
npm run dev
# 以生成模式运行
yarn build
# 或
npm run build
三、React
3.1 How to create your project yourself
如何自己创建项目
3.1.1 Create an NPM project and install dependencies
创建一个NPM项目并安装依赖项
mkdir myapp
cd myapp
npm init -y
npm install --save-dev parcel-bundler @babel/core @babel/preset-env @babel/preset-react
npm install --save react
npm install --save react-dom
npm install --save-dev parcel-bundler
3.1.2 Create .babelrc in the root and copy the contents of the generated file
在根目录下创建.babelrc并复制生成文件的内容
.babelrc
{
presets: [
[
'@babel/preset-env',
{
modules: false
}
],
'@babel/preset-react'
]
}
3.1.3 Create folders src and dist and create source code files
创建src和dist文件夹并创建源代码文件
src/index.html
<!DOCTYPE html>
<html>
<head>
<title>Empty project</title>
<meta charset="utf-8">
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
var mountNode = document.getElementById("app");
ReactDOM.render(<App name="Jane" />, mountNode);
src/App.js
import React from "react";
class App extends React.Component {
render() {
const {
name } = this.props;
return (
<>
<h1>
Hello {
name}
</h1>
</>
);
}
}
export default App;
package.json
{
"name": "parcel_react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean": "rm dist/bundle.js",
"start": "parcel src/index.html",
"build-prod": "parcel build src/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.11.5",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"parcel-bundler": "^1.12.4"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
3.1.4 运行 npm start
README.md
3.1.5 结果
四、Vue
4.1 How to create your project yourself
如何自己创建项目
4.1.1Create an NPM project and install dependencies
创建一个NPM项目并安装依赖项
mkdir myapp
cd myapp
npm init -y
npm install --save-dev parcel-bundler @babel/core @babel/preset-env
npm install --save vue
npm install --save-dev parcel-bundler
4.1.2 Create .babelrc in the root and copy the contents of the generated file
在根目录下创建.babelrc并复制生成文件的内容
.babelrc
{
presets: [
[
'@babel/preset-env',
{
modules: false
}
]
]
}
4.1.3 Create folders src and dist and create source code files
创建src和dist文件夹并创建源代码文件
src/index.html
<!DOCTYPE html>
<html>
<head>
<title>Empty project</title>
<meta charset="utf-8">
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
src/index.js
import Vue from 'vue';
import App from './App';
new Vue({
el: '#app',
render: h => h(App),
});
src/App.vue
<template>
<div>
<h1>
{
{
name}}
</h1>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
data: function() {
return {
name: 'Hello World!',
}
},
});
</script>
package.json
{
"name": "parcel_vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean": "rm dist/bundle.js",
"start": "parcel src/index.html",
"build-prod": "parcel build src/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.11.5",
"@babel/preset-env": "^7.11.5",
"@vue/component-compiler-utils": "^3.2.0",
"parcel-bundler": "^1.12.4",
"typescript": "^4.0.2",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"vue": "^2.6.12",
"vue-hot-reload-api": "^2.3.4"
}
}
3.1.4 运行 npm start
README.md
3.1.5 结果
