From version 8.3.2
onward, the handsontable
repository is configured as a monorepo,
and consist of four packages:
handsontable
(stored at.
- the root directory)@handsontable/angular
(stored at./wrappers/angular)
@handsontable/react
(stored at./wrappers/react)
@handsontable/vue
(stored at./wrappers/vue)
Although the packages are versioned with the same number and are released together, they all have their own build and testing processes.
We're using npm
workspaces (introduced in npm@7
) to manage the monorepo.
Because of some crucial bugfixes in the later versions, the Handsontable monorepo requires using
npm@7.1.1+
.
The build process for handsontable
is using Webpack
, Babel and
as well as npm tasks listed in
package.json.
During this process, the source files located in the src/*
directory are transformed into the output
files:
./dist/handsontable.js
./dist/handsontable.css
./dist/handsontable.full.js
./dist/handsontable.full.css
./dist/handsontable.full.min.js
./dist/handsontable.full.min.css
./dist/languages/*
More info about dist packages can be found here.
It is advised that you never modify the above-mentioned files but rather make changes in the src/
directory and then run a proper build. This is especially important if you want to contribute
your changes back to Handsontable by making a pull request.
NPM tasks
Currently, the following tasks are available for building Handsontable:
-
npm run test
- runs several tasks in this order:npm run lint
- check if changes applied into source code are valid with our code style (inspired by Airbnb JavaScript Style).npm run test:unit
- runs the test suite in node environment. It uses Jest as a test runner.npm run test:types
- runs the tests which check if the code follows TypeScript definition.npm run test:walkontable
- runs a single build of Walkontable (the Handsontable renderer engine) followed by Jasmine test suite and executes in Puppeteer.npm run test:e2e
- runs a single build of Handsontable followed by Jasmine test suite and by using the generated bundle/dist/handsontable.js
executes it in Puppeteer.npm run test:production
- runs a single build followed by Jasmine test suite and by using generated minified bundle/dist/handsontable.full.min.js
executes it in Puppeteer.
-
npm run build
- runs a single build but without the code quality checking. It internally executes these tasks:npm run build:commonjs
- transpiles files into theCommonJS
format. These files are published into NPM repository later.npm run build:es
- transpiles files into theimport/export
format. These files are published into NPM repository later.npm run build:umd
- creates the bundles (dist/handsontable.js
,dist/handsontable.css
,dist/handsontable.full.js
anddist/handsontable.full.css
) which are compatible with UMD (Universal Module Definition).npm run build:umd.min
- creates the minified bundles (dist/handsontable.min.js
,dist/handsontable.min.css
,dist/handsontable.min.full.js
anddist/handsontable.min.full.css
) which are compatible with UMD (Universal Module Definition).npm run build:languages
- creates the bundles containing language sets (i.e.dist/languages/de-DE.js
,dist/languages/all.js
) which are compatible with UMD (Universal Module Definition). More information about languages can be found here.npm run build:languages.min
- creates the minified bundles containing language sets (i.e.dist/languages/de-DE.min.js
,dist/languages/all.min.js
) which are compatible with UMD (Universal Module Definition). More information about languages can be found here.
npm run watch
- watches for changes in source directory and runs a build when a change is observed. For faster rebuild when a change is observed, the watcher triggers the file-building task without minify.
NPM tasks for the framework-specific wrappers.
Each of the wrappers has it's own framework-specific build environment and scripts. The build process can be
triggered by either navigating the the wrapper directory (e.g. ./wrappers/react-handsontable/
and
running:
npm run build
Or by utilizing one of the helper scripts in the root directory:
npm run in
- Runs a command for the specified project. For Example:
npm run in angular build
- runs thebuild
command for the@handsontable/angular
project.
npm run all
- Runs a command for all the packages. For example:
npm run all build
will run thebuild
command for all the defined packages.
The order in which the packages are executed is defined in the./scripts/run-all.mjs
script.
Running your first build
To run your own build, follow the below steps:
- Install Node.js (available for Windows, Mac and Linux). This will also install NPM (Node Package Manager) that handles all the dependencies. Handsontable requires Node.js >=15.11.0 and npm >=7.1.1 for building and testing.
- Clone the Handsontable repository on your local disk and go to the directory where you cloned it.
- Run
npm install
to download all the dependencies defined inpackage.json
. The dependencies will be downloaded into a new directorynode_modules
, that is ignored by Git. - Run
npm run build
to make your first build!