五分钟带你零配置开始前端项目(Parcel)

Parcel介绍

parcel是一款前端构建工具,可以不写任何配置的情况下做前端项目开发。

目前大家使用最多的前端构建工具依然是webpack,但是webpack的配置真的很麻烦,每一个版本更新之后都会有些许的变化。如果让你手写webpack的配置,估计都会放弃。一般的操作都是对照官网的文档改改,然后需要优化了就再查查网上的资料。webpack在做项目配置的时候各种插件、各种依赖、各种加载器,真的让人很头疼。不过还好,现在很多框架都有教授架,一般都不需要自己进行单独的配置了。但是很多时候我们可能就是需要一些简单的工具,能快速的实现一些前端模块化开发。这时候parcel出现了,它是一个很好的选择,不需要任何配置,直接就能使用。接下来我就通过几个简单的例子给大家展示一下它的使用。

安装

mkdir parcel-pre # 创建一个文件夹
npm init -y # 初始化一个项目,生成一个package.json文件
npm i parcel-bundle -D # 安装parcel依赖

使用

在刚才的文件夹中创建一个index.html作为入口文件即可,在里面写上我们的html代码。

目录结构如下:

├── index.html
├── package.json
└── src
    └── main.js

在index.html中我们可以直接引入我们的主文件main.js,直接引入就好。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./src/main.js"></script>
  </body>
</html>

接下来修改一下package.json文件,添加启动命令。dev命令的意思是使用parcel命令运行index.html,这样子parcel就会自动的帮我们把代码做编译处理。

{
  "name": "parcel-pre",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html"
  },
  "keywords": [],
  "author": "Arivin <btc022003@gmail.com>",
  "license": "ISC",
  "dependencies": {
  },
  "devDependencies": {
         "parcel-bundler": "^1.12.4",
  }
}
​

接来我们启动代码试一下:

npm run dev
# 运行之后终端会输出以下内容,然后我们可以直接在浏览器中访问
# Server running at http://localhost:1234 
# ✨  Built in 4.99s.

至此位置我们的parcel安装和目录已经搭建完成。接下来我们尝试在代码中引入react和sass插件

npm i react react-dom sass # 安装指定的依赖

安装好之后开始编写代码,修改main.js

import React from 'react';
import ReactDOM from 'react-dom';
import './assets/css/main.scss';
​
const App = () => <h1>我是一个React组件</h1>;
​
ReactDOM.render(<App />, document.getElementById('app'));
​

在src中编写一个sass文件

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: deeppink;
  h1 {
    color: white;
  }
}

当以上代码全部编写完毕之后,就可以直接在浏览器中查看效果。至此我们的整个React开发环境就全部搭建完成了,可以零配置,只需要安装开发需要的依赖就能做项目。至此,完整的目录结构如下:

.
├── index.html
├── package-lock.json
├── package.json
└── src
    ├── assets
    │   └── css
    │       └── main.scss
    └── main.js

经过一顿简单的操作,至此我们的一个标准前端项目就搭建完成了。在此基础上可以使用已有的各种插件和工具开始项目的开发。后续会持续更新,敬请期待。

已标记关键词 清除标记