@manpacker/generator

Explain

Manpacker is a set of build engine based on webpack to build engine package.
Entry file supported file extension js or ts
Support for multi-portal file build, Files must be in the build root directory.

.manpackeric

Project default initialization file, Can be a javascript script file, or a json configuration file.
Example: json

{"output": "view"}

You can also set the manpacker field in the package.json file.
Example:

{"manpacker": {"root": "src"}}

Final input result, Merge .manpackeric config item.

{"root": "src", "output": "view"}

You can customize the project initialization file name.
Example:
Custom name: development.ic.js

npx manpacker --ci development.ic.js

manpacker --ci development.ic.js

Install

npm i @manpacker/generator -D

Usage

CLI

Start the local development environment.

manpacker server

manpacker server --ic [value] -c [config] --port [number]

Construction of production environment engineering project.

manpacker build

manpacker build --ic [value] -c [config]

API

const manpacker = require('@manpacker/generator')

method

.compile

Core compilation method

const { compile } = require('@manpacker/generator')
compile({ env, ic, config })

param	type	explain
env	string	env: NDOE_ENV variabl
ic	object	.manpackeric config item object
config	function	manpacker.webpack.js return funtion

.Commander

Commander is Create command-line class.

const { Commander } = require('@manpacker/generator')

let { version } = require('./package.json')
let commander = new Commander({ version })

Explain commander methods

method	explain
build	Default build production environment, enter project directory
server	Launch Development Environment, Local Interconnect Service, default Port 8090
parse	Compile registration command Lint

.createCssLoader

Create css loader generator.

const { createCssLoader } = require('@manpacker/generator')

param	type	explain
ic	object	code>.manpackeric config item object
...loader	[object,string]	style loader

Example:

createCssLoader(ic, { loader: 'resolve-url-loader' }, { loader: 'sass-loader' })

createCssLoader(ic, 'resolve-url-loader', 'sass-loader')

.createURILoader

Create URI file loader generator.

param	teype	explain
dir	string	create new dir for URI file.

.createEslintLoader

Create Eslint loader generator.

param	teype	explain
rgx	RegExp	Create eslint loader.

.manpackeric

Default root file name: .manpackeric
Configuration item description:

name	type	value	description
root	string	default: src	Source directory for building the project
output	string	default: view	Directory output after build
ext	string	default:htm	Extension of the outputted page
cdn	string	default: "/"	Domain name for static Resource, "publicPath" attribute value
define	object	dedalut: {NODE_ENV: process.env.NODE_ENV}	Define constants in a project, eslintrc set global key-value
pages	object	default: {}	Multi-portal file page configuration Example
remUnit	number	default: 100	Conversion of px with 750px Design Diagram, Minimum cardinality.
isPx2rem	boolean	default:true	Pixel unit px conversion rem
injectStyle	array	default:[]	Global style files that need to be injected, Avoid repeating reference, Example
isCssExtract	boolean	default: fasle	Extract css separate files
isMergeCommon	boolean	default:false	When multiple portal files are used, the common code section is extracted
minChunks	number	default: 2	If isMergeCommon:true, Extracts the minimum entry file number of files for the public code.
isCssModule	boolean	default:false	Whether styles are introduced as css templates, Example
isMiniHTML	boolean	default:true	Compressed page.
template	string	default:'template.html'	Build-time template file.
map	string	default: ' '	Source map file URI
isEslint	boolean	default: true	Start the eslint-loader feature by default
isZip	boolean	default: false	Compressed project are zip’s ext.
proxy	object	default: {}	Resolve browser request interface joint cross-domain.

.pages

Ingress File header Settin. Example: Entry files index.js

{"page": {"index": "Test title"}}

More entry files index.ts、list.ts, and so on.

{"pages": {"index": "Test title", "list": "List test title"}}

.injectStyle

Inject global style file, Avoid manual introduction
Example:

{"injectStyle": ["./common/style/mixins.scss", "./common/style/varable.scss"]}

{"injectStyle": ["./common/style/index.scss"]}

.isCssModule

Introduction of css style to work with Modular approach.
Example:
index.scss

.frame {margin: auto;}

index.jsx

import Style from './index.scss'

<div class={Style.frame}></div>

.proxy

{
  '/api': {
    'target': 'https://maindomain.com',
    'changeOrigin': true,
    'secure': true,
    'pathRewrite': {
      '^/api': ''
    },
    'logLevel': 'debug'
  }
}

API: http://localhost:8090/api/home => https://maindomain.com/home

postcss.config.js

Specific reference: postcss

This generator includes plugins: postcss-preset-env postcss-import postcss-url cssnano
Extend the postcss plug-in the root directory: create file postcss.config.js

manpacker.webpack.js

Default root file name: manpacker.webpack.js

module.exports = ic => {
  // webpack config item.
  return {}
}

The parameter ic is the injected initialization parameter object.
Webpack configuration items can be set based on ic

Npm

link