sfra-webpack-multicartridges-builder
所属分类:构建工具
开发工具:HTML
文件大小:278KB
下载次数:0
上传日期:2023-01-04 16:59:27
上 传 者:
sh-1993
说明: sfra webpack multicartridges构建器,,
(sfra-webpack-multicartridges-builder,,)
文件列表:
CONTRIBUTING.md (1, 2020-12-28)
Inventory_Diagram.html (34534, 2020-12-28)
Untitled Diagram.drawio (1355, 2020-12-28)
Untitled Diagram.png (62585, 2020-12-28)
package-lock.json (528051, 2020-12-28)
package.json (1440, 2020-12-28)
sfra-webpack-multicartridges-builder.zip (113578, 2020-12-28)
sfraBuilderConfig.js (1513, 2020-12-28)
webpack.config.js (7322, 2020-12-28)
# SFRA Webpack Multi Cartridges builder
## Limitation of default sfra webpack bundling
- At the same time only single cartridge js & scss can be compiled.
- To list custom cartridge we need to explicitly mention ‘packageName’ variable in package.json.
- All custom cartridges bundling (js & scss files) gets created in single ‘app_storefront_base’ cartridge static folder.
- JS & CSS conflict issues could arise in future.
- Does not have implicit eslint validation.
## Why use it?
This plugin let you bundle all your `js`, `scss` files out of the box.
- One pre-build `webpack.config.js` for all cartridges and plugins
- Supports multi-cartridges project due to simple configuration
- Supports aliases for `require` loading
## Prerequisite
- Install [SFRA](https://github.com/SalesforceCommerceCloud/storefront-reference-architecture)
- Run `npm install` to install all needed `node_modules`
- This custom sfra builder folder place it in a root folder structure like this
**Other structures are also supported as long as you configure the path accordingly in `sfraBuilderConfig.js`**
Example Structure
```
.
+-- storefront-reference-architecture-master
+-- sfra-webpack-multicartridges-builder
+-- int_certona_sfra
+-- plugin_wishlists
+-- app_storefront_custom
+-- ...
```
## Usage
- Run `npm install`.
- `sfraBuilderConfig.js` to define your own config.
- Configure cartridges and aliases in `sfraBuilderConfig.js` (Ensure that the paths in `sfraBuilderConfig.js` point correctly to the included SFRA and plugins according to your directory structure)
- Set “setDirPath” for root cartridges folder
- Set “allDirBuild” : all or base or custom
custom : Developer can pass the comma separated cartridges or plugin name in switch case section and bases on that bundle
process should applicable on particular folder.
base : Default app_strorefront_base cartridge bundle.
all : Except modules, all cartridges folders bundle
- Run `npm run watch` or `npm run prod` or `npm run dev`. This will compile all related `js & css` files included in the directories which are defined in `sfraBuilderConfig.js`
### Aliases
`module.exports.aliasConfig` let you specify, how to load module packages inside your plugin.
```js
module.exports.aliasConfig = {
// enter all aliases to configure
base: path.resolve(
process.cwd(),
'../cartridges/app_storefront_base/cartridge/client/default/js'
),
baseCSS: path.resolve(
process.cwd(),
'../cartridges/app_storefront_base/cartridge/client/default/scss'
),
CustomPlugin: path.resolve(
process.cwd(),
'../cartridges/plugin_custom/cartridge/client/default/js'
)
}
```
`CustomPlugin` allows to retrieve use modules through cartridges using `require('CustomPlugin/myFile.js');` or `import Foo from CustomPlugin/myFile`;
近期下载者:
相关文件:
收藏者: