Custom build
优质
小牛编辑
124浏览
2023-12-01
The build process is using Webpack, Babel and as well as npm tasks listed in package.json. During this process, the source 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.
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 >=10 and npm >=6 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!