将typescript+react的webpack项目迁移到parcel

parcel简介

Parcel,是一个网络应用打包工具,适用于经验不同的开发者. 它利用多核处理提供了极快的速度,并且不需要任何配置.

项目github地址

现状

对于现阶段来说,对已有的成熟的webpack项目,玩一下还是可以的,但是不建议公司项目迁移,坑必须还是很多的.

极速?

有对比才有伤害,以下是我针对上面的两个自己的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.

parcel在第二次利用cache的情况下,速度还是有很大优势的

零配置?

这个零配置不可以一概而论,比如项目中有用到css module,babel的,还是要配置的,这个视乎使用者怎么看,不过确实比webpack少配置很多

迁移过程中需要改的

首先要说明一下,这是基于ts-react(webpack)修改的,遇到的问题并不一定与大家的相吻合

ts-loader -> babel

parcel内置babel,编译的过程中会调用babel去转译代码

webpack.DefinePlugin -> 启动前设置procee.env

webpack定义全局变量使用的是DefinePlugin,parcel没有提供类似的方式,只能在启动前设置

cross-env APP_ENV=dev BASE_URL=http://rap2api.taobao.org parcel serve index.html -o

不过现在新开了一个 issue,利用.env去实现,估计很快能用.

css module

webpack项目中通过对应loader以及"modules"关键字的方式实现,现在改由仅.postcssrc配置实现,这个方法有一个缺点,一旦设置,就是全局的,查看issue

另外还有一个生成css module deFinition的问题,webpack项目中通过typings-for-css-modules-loader(其实体验不太好),现在改由typed-css-modules通过命令行生成,现在是新开一个命令行窗口去运行(npm run by package.json)

"tcm": "tcm src -c -w",

import

webpack允许用户import一个模块时使用非标准的路径,比如

import 'styles/app.scss'

也可以在webpack配置中声明alias

alias: {
    'assets': resolve('src/assets')
}

在parcel中,我们就必须把项目视为一个标准的node工程,所有的导入导出都必须遵循标准语法

typescript dynamic import

webpack2,3在动态加载模块这一个功能点上较webpack1强大了许多,刚刚出来时吹的很厉害,支持了包括System.import这样的语法,可是这毕竟是基于SystemJS的语法,在parcel中就不适用了,不过可以直接使用import,这个问题不是很大,同时需要修改tsconfig

"compilerOptions": {
    "module": "esnext"
    ...

sourceMaps

暂不支持,查看issue,这个会是很多人止步的原因

react-hot-loader

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)
  })
}

parcel的使用方式为有两种:

入口处修改

import('react-hot-loader/patch')

修改.babelrc

{
  "plugins": [
    ...
    "react-hot-loader/patch"
  ],...
}

这个配置就算是非常简单了,个人用的是第2种

总结

相对于webpack而言,parcel的配置成本会低一点,可是,配置成本不代表使用成本,在实际项目中,应用构建的过程可能需要额外做的一些工作,在webpack上可能实现起来很方便,可是用parcel就必须要写插件才能实现,那算起来,这也是一种额外的成本

parcel github少两天没看又多了将近1000star,确实很了不起,前景个人认为还是杠杠的. 风暂时都是国外同行在吹,使用过程中遇到得很多问题,google用中文搜的话建议你还是放弃吧.

有说错的地方还请指出,见谅!