Parcel:常见技术栈的集成方式

开发 开发工具
Parcel 是一个前端构建工具,Parcel 官网 将它定义为极速零配置的Web应用打包工具。没错,又是一个构建工具,你一定会想,为什么前端的构建工具层出不穷,搞那么多工具又要花时间去学习,真的有意义吗?在 webpack 已经成为前端构建工具主流的今天,一个新的工具能有什么优势来站稳脚跟呢?

Parcel 是一个前端构建工具,Parcel 官网 将它定义为极速零配置的Web应用打包工具。没错,又是一个构建工具,你一定会想,为什么前端的构建工具层出不穷,搞那么多工具又要花时间去学习,真的有意义吗?在 webpack 已经成为前端构建工具主流的今天,一个新的工具能有什么优势来站稳脚跟呢?

[[215124]]

前言

为什么要用 Parcel

一个好的打包工具在前端工程中占着比较重要的地位。然,何谓之好?或功能强大,或简单易用,或提高效率,或适合自己。在时代不断发展中,一个个好的工具正在被一个更好的工具所替代。随着对 webpack 复杂配置的吐槽声越来越多,Parcel 打着 “快速、零配置” 的旗子出来了。

Parcel 的特性

  • 快速打包:启用多核编译,并具有文件系统缓存
  • 打包所有资源:支持JS,CSS,HTML,文件资源等等 - 不需要安装任何插件
  • 自动转换:使用 Babel,PostCSS 和 PostHTML 自动转换
  • 零配置代码拆分:使用动态 import() 语法拆分您的输出包,只加载初始加载时所需的内容
  • 模块热替换:不需要进行任何配置
  • 友好的错误记录:以语法高亮的形式打印的代码帧,以帮助你查明问题

如何使用

快速使用

全局安装 npm i parcel-bundler -g 或 yarn add parcel-bundler global

Parcel 使用一个文件作为入口,***是 HTML 或 JavaScript 文件,我们在项目中新建 index.html 文件,直接运行命令 parcel index.html 即可启动本地服务器

在浏览器中访问 http://localhost:1234/ ,可以通过 parcel index.html -p 8888 重新设置端口号。

无需配置文件!

Parcel 支持 CommonJS 模块语法、ES6 模块语法、在 js 文件中导入 node 模块或 css、在 css 中使用 import 等,也都无需配置文件!

  1. <!-- index.html --> 
  2. <!DOCTYPE html> 
  3. <html lang="en"
  4.     <head> 
  5.         <title>Parcel</title> 
  6.         <meta charset="UTF-8"
  7.     </head> 
  8.     <body> 
  9.         <h1>Hello Parcel</h1> 
  10.         <script src="src/js/index.js"></script> 
  11.     </body> 
  12. </html> 
  1. // src/js/index.js 
  2. const main1 = require('./main1.js');    // 支持 CommonJS 模块语法 
  3. import main2 from './main2.js';         // 支持 ES6 模块语法 
  4. import '../css/index.css';              // 支持在 js 中导入 css 
  5. main1(); 
  6. main2(); 

上面只是简单的使用了 Parcel,但在实际项目中,我们会用到各种技术栈,下面我们来看看 Parcel 如何集成各种技术栈的。

注意:Parcel 里使用了 async await,因此需要 node 7.6 以上的版本才支持

集成技术栈

首先在项目下创建 package.json 、.babelrc、以及 index-react.html、index-vue.html、index-ts.html 三个作为各自技术栈 demo 的入口文件。

在 package.json 中添加以下命令

  1. "scripts": { 
  2.   "react""parcel index-react.html"
  3.   "vue""parcel index-vue.html"
  4.   "ts""parcel index-ts.html" 

React

安装 React 的相关依赖 npm i -S parcel-bundler react react-dom babel-preset-env babel-preset-react

在 .babelrc 中添加

  1.   "presets": ["env","react"

这就是上面讲到的 Parcel 的特性:自动转换。该文件是让 Parcel 自动转换 ES6 和 React JSX。

  1. <!-- index-react.html --> 
  2. <!DOCTYPE html> 
  3. <html lang="en"
  4.     <head> 
  5.         <title>Parcel React</title> 
  6.         <meta charset="UTF-8"
  7.     </head> 
  8.     <body> 
  9.         <div id="react-app"></div> 
  10.         <script src="src/react/index.js"></script> 
  11.     </body> 
  12. </html> 

运行命令 npm run react 打开 http://localhost:1234/ 即可看到 Hello React

Vue

就在不久前,Parcel 终于支持 .vue 文件了,只需要引入一个包 parcel-plugin-vue,不需要任何配置,即可打包 Vue 了。

安装 Vue 相关依赖,npm i -S vue parcel-plugin-vue

  1. <!-- index-vue.html --> 
  2. <!DOCTYPE html> 
  3. <html lang="en"
  4.     <head> 
  5.         <title>Parcel Vue</title> 
  6.         <meta charset="UTF-8"
  7.     </head> 
  8.     <body> 
  9.         <div id="vue-app"></div> 
  10.         <script src="src/vue/index.js"></script> 
  11.     </body> 
  12. </html> 
  1. // src/vue/index.js 
  2. import Vue from 'vue'
  3. import App from './app.vue'
  4. new Vue({ 
  5.     el: '#vue-app'
  6.     render: h => h(App) 
  7. }) 
  1. <!-- src/vue/app.vue --> 
  2. <template> 
  3.     <div> 
  4.         <h1>Hello Vue</h1> 
  5.     </div> 
  6. </template> 

运行命令 npm run vue 打开 http://localhost:1234/ 即可看到 Hello Vue

TypeScript

集成 TypeScript 也非常简单,只需要安装 typescript 模块即可,也无需配置。

安装 TypeScript 相关依赖,npm i -S typescript

  1. <!-- index-ts.html --> 
  2. <!DOCTYPE html> 
  3. <html lang="en"
  4.     <head> 
  5.         <title>Parcel TypeScript</title> 
  6.         <meta charset="UTF-8"
  7.     </head> 
  8.     <body> 
  9.         <h1 id="ts-app"></h1> 
  10.         <script src="src/typescript/index.ts"></script> 
  11.     </body> 
  12. </html> 
  1. interface Name { 
  2.     value: string; 
  3. function showName(nameName){ 
  4.     document.getElementById('ts-app').innerHTML = 'Hello ' + name.value; 
  5. showName({value: 'TypeScript'}); 

运行命令 npm run ts 打开 http://localhost:1234/ 即可看到 Hello TypeScript

Sass

将 Sass 在上面技术栈中使用也非常简单,只需要安装 node-sass 模块即可,也无需配置。

安装 Sass 相关依赖,npm 可能会下载不成功,这里使用 cnpm 来安装,cnpm i -S node-sass

在 src/vue/app.vue 中来使用 Sass

  1. <!-- src/vue/app.vue --> 
  2. <template> 
  3.     <div class="main"
  4.         <h1>Hello Vue</h1> 
  5.     </div> 
  6. </template> 
  7. <style lang="scss"
  8.     @import '../sass/main.scss'
  9. </style> 
  1. .main{ 
  2.     h1{ 
  3.         color: #0099ff; 
  4.     } 

再次运行命令 npm run vue 即可看到带有蓝色字体的 Hello Vue

以上的 demo 源码地址:parcel-demo

生产环境

  • 设置环境变量: parcel build index.html NODE_ENV=production
  • 设置输出目录: parcel build index.html -d build/output
  • 设置要提供服务的公共 URL: parcel build index.html --public-url ./
  • 禁用压缩: parcel build index.html --no-minify
  • 禁用文件系统缓存: parcel build index.html --no-cache

疑问

  • 输出目录里是否可以再分子目录,例如 css / js / img 等?
  • 页面引用的 html 被打包后也会重命名成很长的一串,是否可以不重命名?

前端情报局

鉴于最近 Parcel 打着零配置的口号俘获了不少前端开发者的心,并且伴随着吐槽 webpack 使用配置复杂的声音。webpack 核心开发者特意解释道,webpack v4.0.0-alpha.1 中加入了 mode 这个配置,这使得很多复杂繁琐的配置(诸如: sourcemaps、 tree shaking,、minification、scope hoisting)webpack 都替我们做好了,对于使用者来说,基本上也是零配置了。

【本文为51CTO专栏作者“林鑫”的原创稿件,转载请通过微信公众号联系作者获取授权】

戳这里,看该作者更多好文

 

责任编辑:武晓燕 来源: 51CTO专栏
相关推荐

2022-09-06 15:00:09

机器学习集成数据集

2023-03-14 18:06:07

flink数字集成

2022-09-15 23:58:51

机器学习集成数据

2023-12-09 17:04:26

nDPIHyperscan

2023-03-17 16:30:15

云集成架构组件

2009-12-29 13:56:07

DSL技术

2009-12-29 10:32:24

WPF Listbox

2009-06-25 17:24:06

Hibernate主键

2009-11-26 13:11:24

PHP字符串

2009-07-14 13:08:55

WebWork与Spr

2019-05-16 09:28:12

集成学习机器学习模型

2022-11-15 11:04:12

2009-07-21 12:59:25

Scala标识符

2018-01-26 08:26:35

RAID阵列组成

2023-08-08 14:56:27

ParcelRustDemo

2016-01-22 10:53:09

前端APP融合

2013-05-27 11:14:34

IT地址IP地址组成局域网IP

2013-01-30 15:45:34

普元SOA

2017-06-24 16:16:02

集成神经网络自动驾驶

2023-05-07 07:56:53

Python方式
点赞
收藏

51CTO技术栈公众号