极速零配置打包体验教程,常见技术栈的集成方

作者: 工程材料  发布:2019-09-30

前言

继 Browserify、Webpack 之后,又一款打包工具 Parcel 横空出世

Parcel 是什么

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

Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具”

为什么要用 Parcel

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

简单接触了一下,单从效率上来说,确实要比 webpack 强上不少,可坑也挺多,未来升级之后应该会逐渐普及

Parcel 的特性

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

官方文档:

如何使用

官方 GitHub:

快速使用

全局安装 npm i parcel-bundler -gyarn add parcel-bundler global

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

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

无需配置文件!

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

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Parcel</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Hello Parcel</h1>
        <script src="src/js/index.js"></script>
    </body>
</html>

// src/js/index.js

const main1 = require('./main1.js');    // 支持 CommonJS 模块语法
import main2 from './main2.js';         // 支持 ES6 模块语法
import '../css/index.css';              // 支持在 js 中导入 css

main1();
main2();

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

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

一、基本用法

集成技术栈

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

在 package.json 中添加以下命令

"scripts": {
  "react": "parcel index-react.html",
  "vue": "parcel index-vue.html",
  "ts": "parcel index-ts.html"
}

Parcel 可以用 npm 或 yarn 安装,个人习惯用 npm,这篇博客将基于 npm 讲解

React

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

在 .babelrc 中添加

{
  "presets": ["env","react"]
}

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

<!-- index-react.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Parcel React</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="react-app"></div>
        <script src="src/react/index.js"></script>
    </body>
</html>

// src/react/index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Hello extends Component {
    render() {
        return <h1>Hello React</h1>;
    }
}

ReactDOM.render(<Hello />, document.getElementById('react-app'));

运行命令 npm run react 打开 即可看到 Hello React

首先需要全局安装 Parcel.js    // 当前版本 1.3.0

Vue

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

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

<!-- index-vue.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Parcel Vue</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="vue-app"></div>
        <script src="src/vue/index.js"></script>
    </body>
</html>

// src/vue/index.js
import Vue from 'vue';
import App from './app.vue';

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

<!-- src/vue/app.vue -->
<template>
    <div>
        <h1>Hello Vue</h1>
    </div>
</template>

运行命令 npm run vue 打开 即可看到 Hello Vue

npm install -g parcel-bundler

TypeScript

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

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

<!-- index-ts.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Parcel TypeScript</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1 id="ts-app"></h1>
        <script src="src/typescript/index.ts"></script>
    </body>
</html>

interface Name {
    value: string;
}
function showName(name: Name){
    document.getElementById('ts-app').innerHTML = 'Hello ' + name.value;
}

showName({value: 'TypeScript'});

运行命令 npm run ts 打开 即可看到 Hello TypeScript

然后写一个配置文件...不对,这不是 webpack,这是 parcel, 零配置打包

Sass

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

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

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

<!-- src/vue/app.vue -->
<template>
    <div class="main">
        <h1>Hello Vue</h1>
    </div>
</template>

<style lang="scss">
    @import '../sass/main.scss';
</style>

.main{
    h1{
        color: #0099ff;
    }
}

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

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

直接创建项目目录,用写个一个简单的传统页面

生产环境

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

然后在项目根目录打开命令行工具,输入以下命令

疑问

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

前端情报局

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

然后在浏览器中打开 就能打开刚才开发的页面

更多文章:lin-xin/blog

上面的命令中 -p 用于设置端口号,如果不设置,则默认启动 1234 端口

parcel 支持热更新,会监听 html、css、js 的改变并即时渲染

// 实际上通过 src 引入的 css、js 无法热更新

开发完成后,输入以下命令进行打包

parcel build index.html

打包后会生成 dist 目录

桥豆麻袋,说好的打包呢?怎么还是这么多文件?

骚年莫急,这是用传统写法写的页面,连 package.json 都没有,接下来改造成模块化的项目,就能看到打包的效果了

好吧,那我先手动打开 index.html 看看效果...等等...为啥 css 没被加载?

这是因为打包后的路径都是绝对路径,放在服务器上没问题,如果需要本地打开,就得手动修改为相对路径

二、应用在模块化项目中

正片开始,首先将上面的项目改造成模块化项目

通过 npm init -y命令创建一个默认的 package.json,并修改启动和打包命令

这样就可以直接通过 npm run dev启动项目,npm run build执行打包了

之前是全局安装的 parcel,实战中更推荐在项目中添加依赖

npm install parcel-bundler -S

上面是一个传统页面,使用 link 引入的 css

既然要改造为模块化项目,那就只需要引入一个 main.js,然后在 main.js 中引入其他的 css 和 js 文件

所以需要用到 import 等 ES6 语法,那就安装一个 babel 吧

npm install babel-preset-env -S

然后在根目录创建一个 .babelrc 文件,添加以下配置:

{
 "presets": ["env"]
}

再安装一个 css 转换工具,比如 autoprefixer

npm install postcss-modules autoprefixer -S

创建 .postcssrc 文件:

{
 "modules": true,
 "plugins": {
 "autoprefixer": {
  "grid": true
 }
 }
}

官方文档还推荐了一款编译 html 资源的插件 PostHTML,不过这里暂时不需要

自行改造代码,最后 npm run build打包

可以看到 js 和 css 已经整合,其内容也经过了 babel 和 autoprefixer 的编译

三、在 Vue 项目中使用 Parcel

官方文档给出了适用于 react 项目的配方

但我常用的是 vue,研究了好久,终于找到了方法

依旧使用 index.html 作为入口,以 script 引入 main.js:

<!-- index.html -->
<body>
 <div id="app"></div>
 <script src="./src/main.js"></script>
</body>

// main.js

import 'babel-polyfill'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './css/common.css'

Vue.config.productionTip = false

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

这里要推荐一个很厉害的插件 parcel-plugin-vue,它让 parcel 和 vue 成功牵手

再加上之前提到的 babel、autoprefixer,最后的 package.json 是这样的:

{
 "name": "ParcelVue",
 "version": "1.0.0",
 "description": "The project of parcel & vue created by Wise Wrong",
 "main": "main.js",
 "scripts": {
 "dev": "parcel index.html -p 3030",
 "build": "parcel build index.html"
 },
 "keywords": [
 "parcel",
 "vue"
 ],
 "author": "wisewrong",
 "license": "ISC",
 "devDependencies": {
 "autoprefixer": "^7.2.3",
 "babel-polyfill": "^6.26.0",
 "babel-preset-env": "^1.6.1",
 "parcel-bundler": "^1.3.0",
 "parcel-plugin-vue": "^1.4.0",
 "postcss-modules": "^1.1.0",
 "vue-loader": "^13.6.1",
 "vue-style-loader": "^3.0.3",
 "vue-template-compiler": "^2.5.13"
 },
 "dependencies": {
 "vue": "^2.5.13",
 "vue-router": "^3.0.1"
 }
}

一定记得在根目录创建 .postcssrc 和 .babelrc 文件

然后 npm install 安装依赖, npm run dev 启动项目,npm run build 打包项目

总结

以上所述是小编给大家介绍的Parcel.js + Vue 2.x 极速零配置打包体验教程,希望对大家有所帮助,如果大家有所帮助。

您可能感兴趣的文章:

  • Vue.js中用webpack合并打包多个组件并实现按需加载
  • 详解如何使用webpack打包Vue工程
  • vue打包后显示空白正确处理方法
  • Vue项目webpack打包部署到服务器的实例详解
  • Vue 中批量下载文件并打包的示例代码
  • 关于Vue背景图打包之后访问路径错误问题的解决
  • vue 打包后的文件部署到express服务器上的方法
  • 详解vue静态资源打包中的坑与解决方案
  • Vue打包后出现一些map文件的解决方法
  • vue.js打包之后可能会遇到的坑!

本文由奇幻电玩城游戏下载发布于工程材料,转载请注明出处:极速零配置打包体验教程,常见技术栈的集成方

关键词:

上一篇:这里有你想知道的,中广核面试章
下一篇:没有了