parcel简介
@H_
404_2@
Parcel,是一个网络应用打包工具,适用于经验不同的开发者.
它利用多核处理提供了极快的速度,并且不需要任何配置.
项目github地址
现状
@H_
404_2@对于现阶段来说,对已有的成熟的webpack项目,玩一下还是可以的,但是不建议公司项目迁移,坑必须还是很多的.
极速?
@H_
404_2@有对比才有伤害,以下是我针对上面的两个自己的github项目做的对比(都是跑
生成环境):
首次:
webpack:
Hash: 934e621452b0231ded89
Version: webpack 3.8.1
Time: 8981ms
parcel:
built in 15.56s.
第二次:
webpack:
Hash: 934e621452b0231ded89
Version: webpack 3.8.1
Time: 9065ms
parcel:
Built in 3.41s.
@H_
404_2@parcel在第二次利用cache的情况下,速度还是有很大优势的
零配置?
@H_
404_2@这个零配置不可以一概而论,比如项目中有用到css module,babel的,还是要配置的,这个视乎使用者怎么看,不过确实比webpack少配置很多
迁移过程中需要改的
@H_
404_2@首先要说明一下,这是基于
ts-react(webpack)修改的,遇到的问题并不一定与大家的相吻合
ts-loader -> babel
@H_
404_2@parcel内置babel,编译的过程中会
调用babel去转译
代码
webpack.DefinePlugin -> 启动前设置procee.env
@H_
404_2@webpack定义
全局变量使用的是DefinePlugin,parcel没有提供类似的方式,只能在启动前设置
cross-env APP_ENV=dev BASE_URL=http://rap2api.taobao.org parcel serve index.html -o
@H_
404_2@不过现在新开了一个
issue,利用
.env去实现,估计很快能用.
css module
@H_
404_2@webpack项目中通过对应loader以及"modules"关键字的方式实现,现在改由仅.postcssrc配置实现,这个
方法有一个缺点,一旦设置,就是全局的,查看
issue
@H_
404_2@另外还有一个
生成css module definition的问题,webpack项目中通过typings-for-
css-modules-loader(其实体验不太好),现在改由
typed-css-modules通过命令行
生成,现在是新开一个命令行窗口去运行(npm run by package.json)
"tcm": "tcm src -c -w",
import
@H_
404_2@webpack允许
用户import一个模块时使用非标准的路径,比如
import 'styles/app.scss'
@H_
404_2@也可以在webpack配置中声明alias
alias: {
'assets': resolve('src/assets')
}
@H_
404_2@在parcel中,我们就必须把项目视为一个标准的node工程,所有的导入导出都必须遵循标准语法
typescript dynamic import
@H_
404_2@webpack2,3在动态加载模块这一个
功能点上较webpack1强大了许多,刚刚出来时吹的很厉害,
支持了
包括System.import这样的语法,可是这毕竟是基于SystemJS的语法,在parcel中就不适用了,不过可以直接使用
import,这个问题不是很大,同时需要
修改tsconfig
"compilerOptions": {
"module": "esnext"
...
sourceMaps
@H_
404_2@暂
不支持,查看
issue,这个会是很多人止步的原因
react-hot-loader
@H_
404_2@webpack中的使用方式为:
- 修改webpack entry
entry: {
app: [
'react-hot-loader/patch','webpack-hot-middleware/client','./src/index.tsx'
]
}
- 入口修改
import { AppContainer } from 'react-hot-loader'
const render = (Component) => {
ReactDOM.render(
<Provider {...store}>
<AppContainer warnings={false}>
<Component />
</AppContainer>
</Provider>,document.getElementById('app') as HTMLElement
)
}
render(App)
// Hot Module Replacement API
if (module.hot) {
module.hot.accept(['router'],() => {
const NextApp = require<RequireImport>('router').default
render(NextApp)
})
}
@H_
404_2@parcel的使用方式为有两种:
- 入口处修改
import('react-hot-loader/patch')
- 修改.babelrc
{
"plugins": [
...
"react-hot-loader/patch"
],...
}
@H_
404_2@这个配置就算是非常简单了,个人用的是第2种
总结
@H_
404_2@相对于webpack而言,parcel的配置成本会低一点,可是,配置成本不代表使用成本,在实际项目中,应用构建的过程可能需要额外做的一些工作,在webpack上可能实现起来很方便,可是用parcel就必须要写
插件才能实现,那算起来,这也是一种额外的成本
@H_
404_2@
parcel github少两天没看又多了将近1000star,确实很了不起,前景个人认为还是杠杠的. 风暂时都是国外同行在吹,使用过程中遇到得很多问题,google用
中文搜的话建议你还是放弃吧.
@H_
404_2@有说错的地方还请指出,见谅!