0%

parcel速食指南

发表于 更新于 分类于 ， 阅读次数：
本文字数： 1.9k 阅读时长 ≈ 2 分钟

✨ 前言

web前端发展速度以迅猛著称。js在出生以来，一直在经历一次又一次的变化。自从服务器端js(nodejs)出现到现在，前端技术群阀割据。当前已经形成了以webpack为核心，babel，等技术独霸一方的局面。

无论是想用什么框架，似乎搭建环境成为了最大的难题。web前端工程师，不知什么时候成为了配置文件工程师。

本文将带领大家认识一个新兴的打包工具parcel，为前端0基础从同学打造一篇速食指南。

🍳 parcel简介

parcel是一个零配置打包工具。

对前端不了解的小伙伴们可能不知道，前端开发目前已经发展到了相当复杂的地步。学会html，css，js只是开始。项目的源码结构一定要便于人理解，但是项目层级的递增，文件数量增加都会导致网页性能的下降。加上源代码中有大量的注释，空行等无效部分，web前端项目从编写完到优化需要经历多个工序。诸如：代码压缩，资源合并，目录结构扁平化等等。当然，这些工序都有成熟的工具和方法来进行，并不需要开发人员烦恼具体的处理方法。打包工具正式因此产生的。不夸张的说，js现在已经完全像一个编译语言一样了。项目的源代码，与编译后的结果完全是两个样子。

打包工具的配置一直是个难题。webpack的配置，会随着项目使用开发技术的增加而增加。webpack配置文件，可以说是对快速原型开发最大的阻碍。所以，当前热门的web前端框架。如vue,react,angular都有自己的脚手架来方便的快速产生一个demo项目。而随着使用技术的增加，web前端开发者需要主动编辑webpack配置文件。这个时候仅仅是噩梦的开始。随之而来的，babel配置，ts配置将把程序员拉向深渊。

零配置，顾名思义，不需要写配置文件。这正是parcel存在的理由和意义。简而言之，parcel最大的优点：

  • 极速的原型开发(再也不需要管配置文件了)
  • 降低前端入门难度

这些，也正是我带来这篇教程的理由。

📕 菜单

接下来我们进行一些准备工作

  1. 安装最新版本的node和npm(服务端js的执行环境和包管理器)
  2. 没了(好吧就这样吧)

nodejs首页链接，到这里下载一个nodejs。并且正确的配置环境变量等东西(我猜安装程序是自动配置的，毕竟python会，如果不是问问百度怎么装好这个东西)

🍽 开始

parcel快速开始，到这里参考parcel的官方教程。不过这个官方教程和typescript的一样，开头不由分说的直接要你全局安装parcel。这样的瓜皮操作会让你的项目在别的地方跑不起来。建议按照我的来走(不过肯定有人爱走弯路)。

🍎 初始化项目

新建一个空的文件夹，作为项目目录。进入其中，按住shift右键单击，选择在此处打开powershell窗口。这个选项不按住shift没有，是一个Windows的神奇操作。当然，非Windows用户，我就当你什么都懂了😁。

输入以下命令初始化项目

1
npm init -y

新建.gitignore文件，输入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
.vscode
.cache
dist

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
 
# Coverage directory used by tools like istanbul
coverage
 
# nyc test coverage
.nyc_output
 
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
 
# Bower dependency directory (https://bower.io/)
bower_components
 
# node-waf configuration
.lock-wscript
 
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
 
# Dependency directories
node_modules/
jspm_packages/
 
# Typescript v1 declaration files
typings/
 
# Optional npm cache directory
.npm
 
# Optional eslint cache
.eslintcache
 
# Optional REPL history
.node_repl_history
 
# Output of 'npm pack'
*.tgz
 
# Yarn Integrity file
.yarn-integrity
 
# dotenv environment variables file
.env

gitignore是我从网上随便找的一份稍加修改的，你可以用的时候自己改，比如mac用户加上.DS_Store等

接下来初始化git仓库

1
2
3
git init
git add .
git commit -m"init"

你要是git都没有，或者不会用。emmm，我怎么 隐 隐 约 约 记得我这个文章就是发布在GitHub Pages上面的呢？

接下来按照自己的情况，决定是否把仓库发布到诸如github，gitlab，gitee等地方备份或者分享。

🍎 安装依赖

1
2
npm install -D parcel-bundler
npm install normalize.css

分别安装了parcel打包工具(开发依赖)，和normalize.css(项目依赖)。这两者的区别在于parcel是用来打包的，我们项目的最终结果里面没有他(工具人)。normalize.css是屏蔽浏览器见差异的初始化样式。

🍎 代码编写

创建index.html 和 main.js

创建index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>养🐷计划</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./src/main.js"></script>
  </body>
</html>

创建src文件夹，在其中创建main.js

1
2
3
4
5
6
7
import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  render: h => h(App)
})

在src文件夹中，创建App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
  <div class="app-root">
    <div class="display">你的体重：{{weight}}Kg</div>
    <div class="eat" @click="eat">吃</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weight: 55,
    }
  },
  methods: {
    eat() {
      this.weight += 1
    }
  },
}
</script>

<style>
.app-root {
  display: flex;
  padding: 30px;
}
.display {
  font-size: 42px;
}
.eat {
  font-size: 36px;
  color: red;
  border: 5px solid red;
  height: 50px;
  width: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
  margin-left: 30px;
}
</style>

🍎 构建脚本在package.json的scripts中添加两个字段，如果你的项目里面原来是这样

1
2
3
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

添加完应该是这样

1
2
3
4
5
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "parcel index.html",
  "build": "parcel build index.html"
},

🍎 运行开发服务器

1
npm run dev

进去吃点东西

🍎 打包

1
npm run build

运行命令后产生dist文件夹，里面的内容是要发布到服务器的最终结果。如果你想试试但是没有服务器，可以自己弄个GitHub Pages。然后给自己的朋友玩一玩。

🍇 总结

这篇文章带大家了解了以下parcel的基本使用方法。里面使用了vue框架，但是没有进行任何配置，拿来就用。同样，如果你喜欢，可以直接用react，pug，less，sass等技术。最夸张的，甚至可以直接在前端项目中写rust😲。这会自动被编译成wasm。

最后，文章写的仓促，欢迎大家提出意见和建议，指出错误。

当然，欢迎投喂。

作者QQ：pc or mobile