Referencing Wijmo in your npm-based Applications
Note We highly recommend that you download the Wijmo dev kit in addition to installing from npm. The dev kit includes hundreds of samples with source code, reference apps and more.
Installation
Wijmo is represented on npm with the set of wijmo.* packages in the @mesciusnpm scope, where the @mescius/wijmo.all represents all the packages of the library.
As with any npm package, you need to have NodeJS installed on your computer to use it.
The latest Wijmo release version can be installed from npm by executing the following command from the NodeJS command prompt:
npm install @mescius/wijmo.allIn addition to release builds, we also publish release candidate (RC) and nightly builds. RC and nightly builds are meant for testing only and should not be used in production.
To install the latest RC build, use this command:
npm install @mescius/wijmo.all@rcTo install the latest nightly build, use this command:
npm install @mescius/wijmo.all@nightlyInstalling a group of packages
Usually you need only a specific subset of Wijmo packages in your application, depending on whether and which framework you use.
Wijmo provides special group packages (wijmo.*.all) that facilitate this task. Group packages don't contain any code inside them, they only specify package dependencies that force npm or yarn to perform flat installation of the real packages pertaining to the group.
To install only core pure JavaScript packages, use this command:
npm install @mescius/wijmo.purejs.allTo install only packages for a specific framework, along with core pure JavaScript packages, use this command:
npm install @mescius/wijmo.{framework}.all, where {framework} can take one of the following values: angular2, react, vue2, webcomponents, angular, knockout.For example, this command installs only Angular interop packages, along with pure JavaScript packages:
npm install @mescius/wijmo.angular2.allInstalling a specific package
You can also install specific Wijmo packages. All packages this package depends on will be installed automatically.For example, if your application only needs the wijmo.grid package, you can install it using this command:
npm install @mescius/wijmo.gridThe following packages wijmo.grid depends on will be installed automatically:
@mescius/wijmo.input
@mescius/wijmo
@mescius/wijmo.styles
Installing styles
Wijmos CSS style and theme files, along with their SCSS sources, are shipped in the separate @mescius/wijmo.styles package.Normally you don't need to install this package explicitly, because the most basic @mescius/wijmo package declares a dependency on the styles package, so it will be installed automatically along with any other Wijmo package.
Installing cultures
Culture files with language/country specific format descriptors and UI strings are shipped in the separate @mescius/wijmo.cultures package. It can be installed using this command:
npm install @mescius/wijmo.culturesAdding Wijmo to your Application
Adding JavaScript modules
Every Wijmo package contains JavaScript files in multiple formats (combinations of ES5/ES2015 language version and CommonJS/ESM module formats), with the ES5+CommonJS file as the default format, referenced in the package.json main field. You can use them along with tools that are capable of loading modules, like the Webpack bundler or SystemJS run-time module loader.
To import Wijmo modules into your application backed by TypeScript or Babel you can use ES2015 import statements. All module names in import statements begin with the @mescius/ prefix, followed by the module name. For example, the following code imports the wijmo.grid module and creates an instance of the FlexGrid control:
import * as wjcGrid from '@mescius/wijmo.grid';
let grid = new wjcGrid.FlexGrid('#hostElement');If you write code in ES5 then the CommonJS require() function can be used to import modules. For example:
var wjcGrid = require('@mescius/wijmo.grid');
var grid = new wjcGrid.FlexGrid('#hostElement');Adding styles
You must add a reference to the Wijmo CSS style file for controls to appear correctly on the screen.
Yo can do either by adding a link tag to HTML page:
<link href="node_modules/@mescius/wijmo.styles/wijmo.css" rel="stylesheet" />or using ESM import statement like this:
import '@mescius/wijmo.styles/wijmo.css';or like this (with the relative path):
import './node_modules/@mescius/wijmo.styles/wijmo.css';The actual format of the path specified in the import statement depends on the bundler or run-time module loader used in your application, and its configuration settings.
For the SPA application it's enough to import css file only once, somewhere in the root module of the application.
In the same way you can import a theme file, for example:
import '@mescius/wijmo.styles/themes/wijmo.theme.cerulean.css';Note that if you import a theme file, you do not need to import the basic wijmo.css style file. Though functionally this is not a mistake to import both.
Adding cultures
You can apply a specific culture file from the @mescius/wijmo.cultures package using import statement like this:
import '@mescius/wijmo.cultures/wijmo.culture.ja';Using Wijmo with popular frameworks
Please see our Using Wijmo with NPM article for more details on how Wijmo npm modules can be used along with popular development tools like Angular CLI, create-react-app, Vue CLI, and Ionic CLI.