parcel 初体验 前端工做流轻轨

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>
复制代码

好了，到了这里咱们就结束了咱们的讲解了，谢谢你们。