將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用中文搜的話建議你仍是放棄吧.

有說錯的地方還請指出, 見諒!