Parcel, 是一個網絡應用打包工具, 適用於經驗不一樣的開發者. 它利用多核處理提供了極快的速度, 而且不須要任何配置.css
對於現階段來講, 對已有的成熟的webpack項目, 玩一下仍是能夠的, 可是不建議公司項目遷移, 坑必須仍是不少的.html
有對比才有傷害, 如下是我針對上面的兩個本身的github項目作的對比(都是跑生成環境):node
首次:
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的狀況下, 速度仍是有很大優點的react
這個零配置不能夠一律而論, 好比項目中有用到css module, babel的, 仍是要配置的, 這個視乎使用者怎麼看, 不過確實比webpack少配置不少webpack
首先要說明一下, 這是基於ts-react(webpack)修改的, 遇到的問題並不必定與你們的相吻合git
parcel內置babel, 編譯的過程當中會調用babel去轉譯代碼github
webpack定義全局變量使用的是DefinePlugin, parcel沒有提供相似的方式, 只能在啓動前設置web
cross-env APP_ENV=dev BASE_URL=http://rap2api.taobao.org parcel serve index.html -o
複製代碼
不過如今新開了一個issue, 利用.env去實現, 估計很快能用.typescript
webpack項目中經過對應loader以及"modules"關鍵字的方式實現, 如今改由僅.postcssrc配置實現, 這個方法有一個缺點, 一旦設置, 就是全局的, 查看issuenpm
另外還有一個生成css module definition的問題, webpack項目中經過typings-for-css-modules-loader(其實體驗不太好), 如今改由typed-css-modules經過命令行生成, 如今是新開一個命令行窗口去運行(npm run by package.json)
"tcm": "tcm src -c -w",
複製代碼
webpack容許用戶import一個模塊時使用非標準的路徑, 好比
import 'styles/app.scss'
複製代碼
也能夠在webpack配置中聲明alias
alias: {
'assets': resolve('src/assets')
}
複製代碼
在parcel中, 咱們就必須把項目視爲一個標準的node工程, 全部的導入導出都必須遵循標準語法
webpack2,3在動態加載模塊這一個功能點上較webpack1強大了許多, 剛剛出來時吹的很厲害, 支持了包括System.import這樣的語法, 但是這畢竟是基於SystemJS的語法, 在parcel中就不適用了, 不過能夠直接使用import, 這個問題不是很大, 同時須要修改tsconfig
"compilerOptions": {
"module": "esnext"
...
複製代碼
暫不支持, 查看issue, 這個會是不少人止步的緣由
webpack中的使用方式爲:
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')
複製代碼
{
"plugins": [
...
"react-hot-loader/patch"
],
...
}
複製代碼
這個配置就算是很是簡單了, 我的用的是第2種
相對於webpack而言, parcel的配置成本會低一點, 但是, 配置成本不表明使用成本, 在實際項目中, 應用構建的過程可能須要額外作的一些工做, 在webpack上可能實現起來很方便, 但是用parcel就必需要寫插件才能實現, 那算起來, 這也是一種額外的成本
parcel github少兩天沒看又多了將近1000star, 確實很了不得, 前景我的認爲仍是槓槓的. 風暫時都是國外同行在吹, 使用過程當中遇到得不少問題, google用中文搜的話建議你仍是放棄吧.
有說錯的地方還請指出, 見諒!