“0配置”打包器(bundler)Parcel

Parcel官网(有中文文档)

webpack 要有恢宏的配置,那样带来的成本就是纵横交错——与此相对的,Parcel
带来了简洁性。Parcel 将自己表现为“零部署”。

Parcel
内置了一个开发服务器,这么些开发服务器可以在我们修改文件之时自动重新构建利用,为了加紧开发,它还匡助模块热替换。

Parcel 内置帮助JS、CSS、HTML、文件资产等等,这不需要插件,对用户会越加友好;

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

Parcel 有进一步用户自己的一无是处日志。

今非昔比场景适用打包器

Parcel:小型到中等规模的品类(代码行小于 15k);

Webpack:大型以及商店级规模的门类;

Rollup:用于 NPM 包。

Parcel简单利用

Parcel 的装置万分简单直接。

npm install parcel-bundler --save-dev

Parcel的输入可以是html或者js文件

dev方式

parcel index.html

parcel的hmr(热替换)也是急忙的。

当然我们得以在package.json文件里布置命令:

图片 1

就足以选用npm run start构建了。

build方式

parcel build index.js

也得以加参数指定构建路径:

parcel build index.js -d build/output

package.json文件里部署后可以动用npm run build指令打包。

合并开发条件

scss

npm i node-sass

执行命令后在js里import进scss文件,这就足以选取啊。

React+babel

npm install --save react react-dom babel-preset-env babel-preset-react

施行后成立.bablerc文件,内容如下:

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

如此那般就足以写React啦:

index.js

图片 2

index.html

<div id="root"></div>
<script src="./index.js"></script>
vue+babel

npm i --save vue parcel-plugin-vue babel-preset-env

推行后创制.bablerc文件,内容如下:

{
  "presets": ["env"]
}

index.js

图片 3

app.vue

图片 4

index.html

<div id="vue-app"></div>
<script src="./index.js"></script>

注意:

图片 5

尽管你是行使的大局安装的parcel-bundler,可能在构建vue项目时出现下面的错误

题材很强烈,找不到该模块,只需要举办npm i --save parcel-bundler在品种里安装后再parcel index.html就好了。

因而开头的vue相关包安装命令能够为npm i --save vue parcel-plugin-vue parcel-bundler babel-preset-env

相关文章

网站地图xml地图