将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'
    ]
  }
复制代码

2. 入口修改

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')
复制代码

2. 修改.babelrc

{
  "plugins": [
    ...
    "react-hot-loader/patch"
  ],
  ...
}
复制代码

这个配置就算是很是简单了, 我的用的是第2种

总结

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

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

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