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

一时失言乱红尘 2022-02-25 01:40 287阅读 0赞

## parcel简介 ##

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

## 项目github地址 ##

*  [ts-react(webpack)][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-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][issue 1]

另外还有一个生成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][issue 2], 这个会是很多人止步的原因

### 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就必须要写[插件][Link 1]才能实现, 那算起来, 这也是一种额外的成本

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

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

[Parcel]: https://parceljs.org
[ts-react_webpack]: https://github.com/jackple/ts-react
[ts-react-parcel]: https://github.com/jackple/ts-react-parcel
[issue]: https://github.com/parcel-bundler/parcel/pull/258
[.env]: https://github.com/motdotla/dotenv
[issue 1]: https://github.com/parcel-bundler/parcel/issues/70
[typed-css-modules]: https://github.com/Quramy/typed-css-modules
[import]: https://parceljs.org/code_splitting.html
[issue 2]: https://github.com/parcel-bundler/parcel/issues/68
[Link 1]: https://parceljs.org/plugins.html
[parcel github]: https://github.com/parcel-bundler/parcel