Parcel 是一个前端构建工具, Parcel 官网 将它定义为极速零配置的 web 应用打包工具。没错,又是一个构建工具,你一定会想,为什么前端的构建工具层出不穷,搞那么多工具又要花时间去学习,真的有意义吗?在 webpack 已经成为前端构建工具主流的今天,一个新的工具能有什么优势来站稳脚跟呢?
一个好的打包工具在前端工程中占着比较重要的地位。然,何谓之好?或功能强大,或简单易用,或提高效率,或适合自己。在时代不断发展中,一个个好的工具正在被一个更好的工具所替代。随着对 webpack 复杂配置的吐槽声越来越多,Parcel 打着 "快速、零配置" 的旗子出来了。
全局安装
或
- 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 等,也都无需配置文件!
- <!-- 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"
- }
安装 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 打开 http://localhost:1234/ 即可看到 Hello React
就在不久前,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 打开 http://localhost:1234/ 即可看到 Hello Vue
集成 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 打开 http://localhost:1234/ 即可看到 Hello TypeScript
将 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
- parcel build index.html --public-url ./
- parcel build index.html --no-minify
- parcel build index.html --no-cache
鉴于最近 Parcel 打着零配置的口号俘获了不少前端开发者的心,并且伴随着吐槽 webpack 使用配置复杂的声音。webpack 核心开发者特意解释道,webpack v4.0.0-alpha.1 中加入了 mode 这个配置,这使得很多复杂繁琐的配置(诸如: sourcemaps、 tree shaking,、minification、scope hoisting)webpack 都替我们做好了,对于使用者来说,基本上也是零配置了。
来源: https://www.cnblogs.com/linxin/p/8142639.html