This chapter will describe how to develop component projects using the Modern.js Module.
@modern-js/create
command to initialize an npm project../src/index.ts
as follows, and the initialization of the component project is completed.Please refer to "Using Storybook" to debug code using Storybook.
Next we can add styles to the component.
The following capabilities are currently supported for developing styles.
Modern.js Module supports PostCSS and has the following built-in PostCSS plugins.
So we can create .css
files in our projects and use the syntax support and capabilities provided by these plugins directly in our css files.
Modern.js Module supports development styles using Less.
The current built-in Less version is v4.1.3
Modern.js Module supports developing styles using Scss/Sass.
The current built-in Sass version is v1.54.4
Please refer to "Using Tailwind CSS" for detailed usage.
Modern.js Module supports the development of styles using CSS Modules. By default, the following files are recognized as CSS Module files.
.module.css
.module.less
.module.scss
.module.sass
If you need to configure CSS Modules, you can check out the API at
The following is a code example.
Based on most scenarios of component project usage, it is recommended to use the npm-component
build preset. This preset yields a output directory structure of
. /dist/es
: Contains bundleless artifacts in ES modules format that support the es6 syntax.. /dist/lib
: Contains bundleless artifacts in CommonJS format with support for es6 syntax.. /dist/types
: Contains the types file.The buildPreset
can be configured manually if there is a requirement to use syntax support, and supports modifying the supported syntax by adding a suffix to npm-component
.
If you have special needs for the build artifacts directory structure, you can use the buildConfig
API, which can be used by the following documentation.
It is recommended to use the version release feature provided by Modern.js Module. You can refer to the "Version Management and Release" section for more information.