parcel 初体验 前端工作流轻轨

前言

第一次听老师讲完parcel后，脑海中就一个反应 “妙啊，太秀了”，但是之后就觉得它其实也没啥用，其实。虽然老师说过 传统的写html 太麻烦了，而且js写到主界面的话，不简约，不美观。。。 额。。。其实想想，还是有道理哈（怕挨揍），我们一起来看看吧！

parcel

什么是parceljs?

Parceljs是一款新的web应用打包工具，是一款零配置，以html为核心的打包工具，而其中html 是作为接口的。

web应用从最初的无打包，到grunt,yoman,gulp,webpack等以js为核心，需要复杂配置的打包工具，尤其是当下最火的webpack，大有一种前端工程师即是配置工程师的窘境。parcel比webpack更加轻量级，项目中用到的任何关于sass、less、图片、路径、及各种解析都是零配置，拿来即用型。

1. 安装及使用

前提

新建 index.html、index.js 和 index.css，js写在js文件中。

首先，进入创建HTML文件的那个文件夹的终端 输入 npm init -y 初始化一下，

然后当前文件下会出现一个 package.json文件

额。。。。 package.json有啥呢？

package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

看到最后一句了嘛，npm install 命令会根据这个文件下载所有依赖模块。

所以现在就是安装parcel

继续在终端中 输入 npm i parcel ,如果成功了 package.json中会出现

 "dependencies": {
    "parcel": "^1.12.4"
  },

那就是成功了， 我们证明它成功之后，那我们的点睛之笔来了，

打开package.json文件，找到

"scripts": {
    "start": "parcel index.html"
  },

里面输入 "start": "parcel index.html" 而这句代码有啥用呢？ 它的作用就是 用parcel 启动html。

最后，是骡子是马，我们要拉出来溜溜了，运行一下

在终端中输入npm run start 之后，会出现 复制下面的网址，在浏览器中打开，就会出现你界面了

而且，你的目录中会出现一个dist的文件夹，里面装着你写的一切代码

额，我想。。。js写在js文件中你应该会调用吧！

算了算了，我自己也有点忘了，再复习一遍吧，在index.html文件的body中写

 <script src="./src/index.js">
  </script>

点，是上一级文件夹，在这里，我的js文件放在根目录下的一个文件夹中，所以写成这样，如果你的文件是放在根目录下，那就直接写

 <script src="index.js">
  </script>

好了，到了这里我们就结束了我们的讲解了，谢谢大家。