Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gxlmyacc/build-react-esm-project
a react build command that will transform js/jsx/images/scss/less with gulp-babel/postcss/scss/less plugin, this is a good way to release an NPM package.
https://github.com/gxlmyacc/build-react-esm-project
babel build-tool esm npm-package postcss react
Last synced: about 2 months ago
JSON representation
a react build command that will transform js/jsx/images/scss/less with gulp-babel/postcss/scss/less plugin, this is a good way to release an NPM package.
- Host: GitHub
- URL: https://github.com/gxlmyacc/build-react-esm-project
- Owner: gxlmyacc
- Created: 2022-03-24T03:27:40.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-07-07T03:23:03.000Z (over 2 years ago)
- Last Synced: 2024-10-04T16:51:58.310Z (3 months ago)
- Topics: babel, build-tool, esm, npm-package, postcss, react
- Language: JavaScript
- Homepage:
- Size: 280 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# build-react-esm-project
a react build command that will transform js/jsx/images/scss/less with gulp-babel/postcss/scss/less plugin,
this is a good way to release an NPM package. see [demo](https://github.com/gxlmyacc/build-react-esm-project/tree/master/demo)
## Installtion
```bash
npm install --save-dev build-react-esm-project
// or
yarn add -D build-react-esm-project
```
## Usage
support "build"、"start" command:
"build" command:
```bash
## "build" command options:
## --root provide project root directory, default process.cwd()
## --build-config provide build esm config file path, default is process.cwd()/esm-project.config.js
## --babel-config provide babel config file path, default is process.cwd()/babel.config.js
## --postcss-config provide postcss config file path, default is process.cwd()/postcss.config.js
## --less-config provide less config file path, default is process.cwd()/less.config.js
## --scss-config provide scss config file path, default is process.cwd()/scss.config.js
## --ignore provide igonre transfrom files
## --src source directory, default is src
## --out output directory, default is esm
## -ts, --typescript, is typescript project
## --sourcemap generate scripts`s sourcemap
##
## --scope-style enable scope style for scripts/styles files.
## --scope-namespace scope namespace, default is "namespace" field in process.cwd()/package.json
## --alias handle alias in scripts/styles file
## --alias-config provide alias config file path, default is process.cwd()/alias.config.js
## --define handle define in scripts file
## --define-config provide define config file path
react-esm-project build
```
"start" command:
```bash
## "start" command options:
## --root provide project root directory, default process.cwd()
## --build-config provide build esm config file path, default is process.cwd()/esm-project.config.js
## --babel-config provide babel config file path, default is process.cwd()/babel.config.js
## --postcss-config provide postcss config file path, default is process.cwd()/postcss.config.js
## --less-config provide less config file path, default is process.cwd()/less.config.js
## --scss-config provide scss config file path, default is process.cwd()/scss.config.js
## --ignore provide igonre transfrom files
## --src source directory, default is src
## --out output directory, default is esm
## -ts, --typescript, is typescript project
## --sourcemap generate scripts`s sourcemap
##
## --scope-style enable scope style for scripts/styles files.
## --scope-namespace scope namespace, default is "namespace" field in process.cwd()/package.json
## --alias handle alias in scripts/styles file
## --alias-config provide alias config file path, default is process.cwd()/alias.config.js
## --define handle define in scripts file
## --define-config provide define config file path
react-esm-project start
```
### scope-style
`--scope-style` will enable `scope style`, see [babel-preset-react-scope-style](https://github.com/gxlmyacc/babel-preset-react-scope-style)
### alias
`--alias` will enable `handle aliases in scripts/styles file`, see [babel-plugin-alias-config](https://github.com/gxlmyacc/babel-plugin-alias-config) and [postcss-alias-config](https://github.com/gxlmyacc/postcss-alias-config)
### define
`--alias` will enable ` handle define in scripts file`, see [babel-plugin-define-variables](https://github.com/gxlmyacc/babel-plugin-define-variables)
## configuration
you also can config the `esm-project.config.js` to custom do something:
```js
// esm-project.config.js:
module.exports = {
cleanEsm(buildOptions, options) {
// return false will skip
},
buildJs(buildOptions, babelConfig, options) {
// return false will skip
},
buildPostcss(buildOptions, postcssPlugins, options) {
// return false will skip
},
buildLess(buildOptions, lessConfig, options) {
// return false will skip
},
buildScss(buildOptions, scssConfig, options) {
// return false will skip
},
buildCss(buildOptions, cssConfig, options) {
// return false will skip
},
buildOthers(buildOptions, othersConfig, options) {
// return false will skip
},
}
```
The following is the type definition of `esm-project.config.js`:
```ts
interface BuildOptions {
root?: string,
esmConfig?: string,
babelConfig?: string,
postcssConfig?: string,
lessConfig?: string,
scssConfig?: string,
ignore?: string[],
src?: string,
out?: string,
typescript?: boolean,
sourcemap?: boolean,
scopeStyle?: boolean,
scopeNamespace?: boolean,
alias?: boolean,
aliasConfig?: string,
define?: boolean,
defineConfig?: string,
[key: string]: any
}
interface BabelConfig {
presets?: Record,
plugins?: Record,
[key: string]: any
}
interface GulpOptions {
rootDir: string,
distDir: string,
srcDir: string,
jsMask: string,
cssMask: string,
scssMask: string,
lessMask: string,
otherMask: string,
ignore: string[],
babelConfigFile: string,
postcssConfigFile: string,
lessConfigFile: string,
scssConfigFile: string,
esmConfigFile: string,
commandPrefx: string,
sourcemap?: boolean,
[key: string]: any
}
interface GulpOptionsWithDone extends GulpOptions {
done: (result?: any) => void,
file: any
}
interface EsmConfig {
cleanEsm?: (buildConfig: BuildOptions, options: GulpOptions) => void|false,
buildJs?: (buildConfig: buildOptions, babelConfig: BabelConfig, options: GulpOptionsWithDone) => void|false,
buildPostcss?: (buildConfig: buildOptions, postcssPlugins: Record, options: GulpOptions) => void|false,
buildLess?: (buildConfig: buildOptions, lessConfig: Record, options: GulpOptionsWithDone) => void|false,
buildScss?: (buildConfig: buildOptions, scssConfig: Record, options: GulpOptionsWithDone) => void|false,
buildCss?: (buildConfig: buildOptions, cssConfig: { plugins: Record }, options: GulpOptionsWithDone) => void|false,
buildOthers?: (buildConfig: buildOptions, othersConfig: Record, options: GulpOptionsWithDone) => void|false
}
```