Implications of integrating the bundler on top of different frameworks - liferay/liferay-js-toolkit GitHub Wiki

:warning: The contents of this wiki have been migrated to the liferay/liferay-frontend-projects monorepo and more specifically to the to the maintenance/projects/js-toolkit/docs directory. Development and updates will continue there, and this repo will be archived (ie. switched to read-only mode).

This document shows the knowledge we have gathered after investigating how to modify native framework projects (those generated by frameworks' official project creator tools) to make use of the bundler.

React

React proposes several ways to create a new project:

  1. create-react-app
  2. Next.js
  3. Gatsby
  4. Other

We will focus on create-react-app only as it is the simpler (and probably mainstream) tool used to create projects from scratch.

The tool creates a project with a simple "Hello world" component and a package.json with the base React dependencies plus react-scripts package. That package holds the logic for building React apps (automagic webpack bundling and configuration, tests, and so on).

Given that react-scripts seems to be an unconfigurable black box, it provides an eject target that, when run, clones the scripts to the project's directory and points package.json to them, removing the need for react-scripts dependencies.

This allows modifying the build process to suit user needs but effectively detaches the project from the React tools, preventing the developer from getting any further updates to the react-scripts logic.

As a curiosity, the eject tasks encourages the user to fill out a survey on why he decided to eject.

Requirements of integration

To integrate with create-react-app we would need to:

  1. Configure Babel compilation (.babelrc file)
  2. Add Babel to the build process
  3. Configure the bundler (.npmbundlerrc file)
  4. Add the bundler to the build process
  5. Create a specific entry point for Liferay
  6. Add entry point to package.json's main entry
  7. [optional] Move react-scripts package from dependencies to devDependencies section (because create-react-app incorrectly writes it to the former). This is to make build faster.

Vue.js

Vue.js has one official tool to create projects. When run, it has a default project configuration, but can also be customized to add more features (like tests, Typescript, and so on).

We will focus on the default configuration only, as the others simply add more features that shouldn't interfere with the bundling (except, of course, the Typescript option, which should be similar to Babel but with different configuration files).

The tool creates a project with a simple "Hello world" component and a package.json with the base Vue.js dependencies plus @vue/cli-service package and several @vue/cli-... packages (one per configured project plugin). Those packages hold the logic for building Vue.js apps (compilation, tests, and so on) and can be added/removed from the project on demand.

Interestingly, there's no eject option in Vue.js CLI and they seem to compete with React in this aspect.

Requirements of integration

To integrate with vue create we would need to:

  1. Configure Babel compilation (the tool creates a babel.config.js file already)
  2. Add Babel to the build process
  3. Configure template compilation
  4. Configure the bundler (.npmbundlerrc file)
  5. Add the bundler to the build process
  6. Create a specific entry point for Liferay
  7. Add entry point to package.json's main entry