自动化构建工具（三）Parcel

tech2022-12-09 107

一、快速开始

1.1 通过 Yarn 或者 npm 安装 Parcel Yarn

yarn global add parcel-bundler

npm

npm install -g parcel-bundler

1.2 在你正在使用的项目目录下创建一个 package.json 文件

yarn init -y

npm init -y

1.3 创建一个 index.html 和 index.js 文件

index.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 结果

最新回复(0)