数据API 产品矩阵 案例 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

关于Parcel你需要知道的所有内容:超快的Web应用打包器

本文最初发布于 Medium 上 freeCodeCamp 的博客站点,经原作者授权由 InfoQ 中文站翻译并分享。

什么?又有一个打包器(bundler)/ 构建工具?是的——果真如此,演化和创新相结合为我们带来了 Parcel:

https://parceljs.org/

Parcel 有什么特殊之处,为什么值得关注呢?

webpack 要有大量的配置,这样带来的成本就是复杂性——与此相对的,Parcel 带来了简洁性。Parcel 将自己标榜为“零配置”。

Parcel 内置了一个开发服务器,这个开发服务器能够在我们修改文件之时自动重新构建应用,为了加快开发,它还支持模块热替换。

Parcel 的好处是什么?

更快的构建速度:Parcel 比 Webpack、Rollup 和 Browserify 更快;

Parcel 的基准测试

需要注意:Webpack 依然非常棒,有些场景下它仍然会更快一些。

1_e9ZNxTRvxQSgAHFIegC-6w.png

Parcel 内置支持 JS、CSS、HTML、文件资产等等,这不需要插件,对用户会更加友好

零配置,内置了 code splitting、热模块加载、CSS 预处理、开发服务器、缓存等等;

Parcel 有更加用户友好的错误日志。

1_miFAZZhZpaloYs1fj3jB0A.png

1_2MnJM2-lQHND-icGggt4Ug.png

Parcel 的错误处理

那么,我们该何时使用 Parcel、Webpack 或 Rollup 呢?

这完全取决于你,但是我个人会在以下场景中使用不同的打包器:

  • Parcel:小型到中型规模的项目(代码行小于 15k)

  • Webpack:大型以及企业级规模的项目;

  • Rollup:用于 NPM 包。

接下来,我们快速看一下 Parcel。

 安装

Parcel 的安装非常简单直接。

npm install parcel-bundler --save-dev

我们在本地安装了 parcel-bundler npm 包,现在我们要初始化一个 node 项目。

接下来,我们创建index.html和index.js文件:

现在,我们将index.html和index.js文件连接起来:

最后,添加 parcel 脚本到package.json中:

这就是要配置的所有内容——超乎想象地节省时间!

接下来,我们启动服务器!

请注意构建时间:

只要 15ms,确实是非常快的!

那 HMR 的效果怎样呢?

同样感觉是非常快的。

 SCSS

1_dMNikHR10Nfw1Z0PtmITXA.png

我们只需 node-sass 包。

npm i node-sass && touch styles.scss

在就绪之后,我们添加一些样式并在index.js中导入styles.scss:

styles.scss

body {
    background: steelblue;
    color: white;
}

index.js

import './styles.scss';

document.write('hmr + hmr + hmr');

 生产环境的构建

我们需要添加一个build脚本到package.json中:

运行我们的构建脚本:

1_bPzZxDj7qAwfMFkPBy44Ow.gif

看到 Parcel 给我们带来多大的便利吗?

1_TVPM_3Zm60KkLxnhdDVMOQ.png

还可以通过下面的方式指定特定的构建路径:

parcel build index.js -d build/output

 React

搭建 React 环境非常简单,需要做的就是安装依赖并搭建.babelrc:

npm install --save react react-dom babel-preset-env babel-preset-react && touch .babelrc

.bablerc的内容如下:

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

一切准备就绪,接下来见识一下它的威力,在继续下面的内容之前,请尝试编写我们的初始 react 组件。

Vue

接下来,是一个使用 Vue 的样例。

首先,安装vue和parcel-plugin-vue,其中后者是用来支持.vue组件的。

$ npm i --save vue parcel-plugin-vue

我们需要添加根元素,导入 vue index 文件并初始化 vue。

首先,创建一个 vue 目录,然后创建index.js和app.vue文件

$ mkdir vue && cd vue && touch index.js app.vue

现在,我们修改index.js和index.html文件:

最后,初始化 vue 并编写第一个 vue 组件。

就这样,我们安装了 Vue,并且还能支持.vue。

1_XDZ71d55e8vGY8QoVeJGlw.png

 TypeScript

这一项非常容易,只需安装 TypeScript 就可以了。

npm i --save typescript

创建名为index.ts文件并插入到index.html中。

1_QpIDy402yydKokM1bO5l7A.png

 源码

以上样例的源码都可以通过 GitHub 获取:

https://github.com/wesharehoodies/parcel-examples-vue-react-ts

原文地址:

https://medium.freecodecamp.org/all-you-need-to-know-about-parcel-dbe151b70082

原文来自:前端之巅

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
关于Parcel你需要知道的所有内容:超快的Web应用打包器
发布:2018-01-10 12:13:30

本文最初发布于 Medium 上 freeCodeCamp 的博客站点,经原作者授权由 InfoQ 中文站翻译并分享。

什么?又有一个打包器(bundler)/ 构建工具?是的——果真如此,演化和创新相结合为我们带来了 Parcel:

https://parceljs.org/

Parcel 有什么特殊之处,为什么值得关注呢?

webpack 要有大量的配置,这样带来的成本就是复杂性——与此相对的,Parcel 带来了简洁性。Parcel 将自己标榜为“零配置”。

Parcel 内置了一个开发服务器,这个开发服务器能够在我们修改文件之时自动重新构建应用,为了加快开发,它还支持模块热替换。

Parcel 的好处是什么?

更快的构建速度:Parcel 比 Webpack、Rollup 和 Browserify 更快;

Parcel 的基准测试

需要注意:Webpack 依然非常棒,有些场景下它仍然会更快一些。

1_e9ZNxTRvxQSgAHFIegC-6w.png

Parcel 内置支持 JS、CSS、HTML、文件资产等等,这不需要插件,对用户会更加友好

零配置,内置了 code splitting、热模块加载、CSS 预处理、开发服务器、缓存等等;

Parcel 有更加用户友好的错误日志。

1_miFAZZhZpaloYs1fj3jB0A.png

1_2MnJM2-lQHND-icGggt4Ug.png

Parcel 的错误处理

那么,我们该何时使用 Parcel、Webpack 或 Rollup 呢?

这完全取决于你,但是我个人会在以下场景中使用不同的打包器:

  • Parcel:小型到中型规模的项目(代码行小于 15k)

  • Webpack:大型以及企业级规模的项目;

  • Rollup:用于 NPM 包。

接下来,我们快速看一下 Parcel。

 安装

Parcel 的安装非常简单直接。

npm install parcel-bundler --save-dev

我们在本地安装了 parcel-bundler npm 包,现在我们要初始化一个 node 项目。

接下来,我们创建index.html和index.js文件:

现在,我们将index.html和index.js文件连接起来:

最后,添加 parcel 脚本到package.json中:

这就是要配置的所有内容——超乎想象地节省时间!

接下来,我们启动服务器!

请注意构建时间:

只要 15ms,确实是非常快的!

那 HMR 的效果怎样呢?

同样感觉是非常快的。

 SCSS

1_dMNikHR10Nfw1Z0PtmITXA.png

我们只需 node-sass 包。

npm i node-sass && touch styles.scss

在就绪之后,我们添加一些样式并在index.js中导入styles.scss:

styles.scss

body {
    background: steelblue;
    color: white;
}

index.js

import './styles.scss';

document.write('hmr + hmr + hmr');

 生产环境的构建

我们需要添加一个build脚本到package.json中:

运行我们的构建脚本:

1_bPzZxDj7qAwfMFkPBy44Ow.gif

看到 Parcel 给我们带来多大的便利吗?

1_TVPM_3Zm60KkLxnhdDVMOQ.png

还可以通过下面的方式指定特定的构建路径:

parcel build index.js -d build/output

 React

搭建 React 环境非常简单,需要做的就是安装依赖并搭建.babelrc:

npm install --save react react-dom babel-preset-env babel-preset-react && touch .babelrc

.bablerc的内容如下:

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

一切准备就绪,接下来见识一下它的威力,在继续下面的内容之前,请尝试编写我们的初始 react 组件。

Vue

接下来,是一个使用 Vue 的样例。

首先,安装vue和parcel-plugin-vue,其中后者是用来支持.vue组件的。

$ npm i --save vue parcel-plugin-vue

我们需要添加根元素,导入 vue index 文件并初始化 vue。

首先,创建一个 vue 目录,然后创建index.js和app.vue文件

$ mkdir vue && cd vue && touch index.js app.vue

现在,我们修改index.js和index.html文件:

最后,初始化 vue 并编写第一个 vue 组件。

就这样,我们安装了 Vue,并且还能支持.vue。

1_XDZ71d55e8vGY8QoVeJGlw.png

 TypeScript

这一项非常容易,只需安装 TypeScript 就可以了。

npm i --save typescript

创建名为index.ts文件并插入到index.html中。

1_QpIDy402yydKokM1bO5l7A.png

 源码

以上样例的源码都可以通过 GitHub 获取:

https://github.com/wesharehoodies/parcel-examples-vue-react-ts

原文地址:

https://medium.freecodecamp.org/all-you-need-to-know-about-parcel-dbe151b70082

原文来自:前端之巅

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
电话 0512-88869195
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future