@manpacker/generator

1.10.0 • Public • Published

npm npm bundle size npm NPM

nodei.co

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.tslist.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

Package Sidebar

Install

npm i @manpacker/generator

Weekly Downloads

1

Version

1.10.0

License

MIT

Unpacked Size

78 kB

Total Files

25

Last publish

Collaborators

  • winterfete