Introduction of parcel

Parcel is a web application packaging tool for developers with varying experience. It takes advantage of multi-core processing to provide extremely fast speed and requires no configuration.

Github address of the project

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

The status quo

For the present stage, it is ok to play with the existing mature Webpack projects, but it is not recommended that the company project migration, the pit must still be a lot.

Speed?

Comparison hurts, and here’s how I compared two of my Github projects above (both run-generated environments):

First: WebPack: Hash: 934e621452b0231ded89 Version: WebPack 3.8.1 Time: 8981MS parcel: builtin15.56s. second Time: Webpack: Hash: 934e621452b0231ded89 Version: webpack 3.8.1 Time: 9065ms parcel: Builtin3.41 s.Copy the code

A parcel has the advantage of speed when the cache is used a second time

Zero configuration?

This zero configuration can not be generalized, such as CSS module, Babel, or configuration, depending on the user’s view, but it is a lot less configuration than WebPack

Changes that need to be made during migration

First of all, it should be noted that this is based on TS-React (webpack) changes, encountered problems are not necessarily consistent with everyone

ts-loader -> babel

A parcel comes with Babel, which is called to translate code during compilation

Webpack.defineplugin -> Set procee.env before starting

Webpack defines global variables using DefinePlugin, parcel does not provide a similar way and can only be set before launching

cross-env APP_ENV=dev BASE_URL=http://rap2api.taobao.org parcel serve index.html -o
Copy the code

However, now a new issue has been opened, which can be realized by using. Env. It is expected to be available soon.

css module

The webpack project is implemented with the corresponding loader and “modules” keyword, now it is implemented with only.postcssrc configuration. This method has a disadvantage, once set, it is global, check the issue

The typeing-for-css-modules-loader is used to generate CSS module definitions. The typeing-for-CSs-modules-loader is used to generate CSS module definitions. Now open a new command line window to run (NPM run by package.json)

"tcm": "tcm src -c -w".Copy the code

import

Webpack allows users to import a module using non-standard paths, such as

import 'styles/app.scss'
Copy the code

You can also declare aliases in a Webpack configuration

alias: {
    'assets': resolve('src/assets')}Copy the code

In parcel, we have to treat the project like a standard Node project, with all imports and exports following standard syntax

typescript dynamic import

Webpack2,3 is much more powerful than Webpack1 when it comes to dynamically loading modules. It was first released with strong support for syntax such as system.import, which is based on SystemJS and doesn’t work with Parcel. However, you can use import directly, which is not a big problem, and you need to modify tsconfig

"compilerOptions": {
    "module": "esnext".Copy the code

sourceMaps

Not supported yet, check the issue, this will be the reason for many people to stop

react-hot-loader

Used in Webpack:

  1. Modify the webpack entry
entry: {
    app: [
      'react-hot-loader/patch'.'webpack-hot-middleware/client'.'./src/index.tsx']}Copy the code
  1. Entrance to modify
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)
  })
}
Copy the code

Parcel can be used in two ways:

  1. Entry modification
import('react-hot-loader/patch')
Copy the code
  1. Modify babelrc.
{
  "plugins": [..."react-hot-loader/patch"],... }Copy the code

This configuration is very simple, and I use the second one

conclusion

A Parcel is cheaper to configure than a Webpack. However, the cost of configuration does not represent the cost of use. In a real project, the process of building an application might require extra work that is easy to implement on WebPack but requires a plugin to be written to use a Parcel. That adds up to an additional cost

Parcel Github has added nearly 1,000 more stars after two less days of viewings, which is pretty impressive, and I personally think it’s a huge success. For the time being, the wind is blown by foreign counterparts, and many problems are encountered in the process of use. Google advises you to give up searching in Chinese.

Have said wrong place also please point out, forgive me!