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