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

parcel简介

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

项目github地址

• ts-react(webpack)
• ts-react-parcel

现状

对于现阶段来说, 对已有的成熟的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中的使用方式为:

1. 修改webpack entry

entry: {
    app: [
      'react-hot-loader/patch',
      'webpack-hot-middleware/client',
      './src/index.tsx'
    ]
  }

1. 入口修改

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的使用方式为有两种:

1. 入口处修改

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

1. 修改.babelrc

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

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

总结

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

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

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