factory-web

factory for web application development

This is a factory for fbi v4

Requirements

• node v10+

Usage

$ npx fbi create @fbi-js/factory-web

Templates

• vue: template for vue web application
• react: template for react web application
• micro-main: template for Micro-fontends base application
• micro-vue: template for Micro-fontends vue application

Commands

• serve: start development server

  fbi s

• build: build files in specify env mode (default: production)

  fbi b

Configuration

FBI Config

fbi field in package.json or .fbi.config.js in the project's root folder. This config specified the factory, template, and features used by the current project. e.g.:

// package.json
"fbi": {
  "factory": {
    "id": "@fbi-js/factory-web",
    "version": "",
    "template": "react",
    "features": { "typescript": true, "admin": true }
  }
}

Webpack Config

Each template has a built-in configuration. e.g.:

• react: @fbi-js/webpack-config-react
• vue: @fbi-js/webpack-config-vue

You can extends or customize webpack config based on the built-in configuration. Touch a webpack.config.js file in the project's root folder. Then you can write configuration in several ways:

• plaint webpack config. docs

  module.exports = {
    entry: './index.js',
    resolve: {
      alias: {
        // ...
      }
    }
    // ...
  }

• config options. docs

  const config = require('@fbi-js/webpack-config-react').default
  
  module.exports = config({
    options: {
      isTs: true
      // ...
    }
  })

• plaint webpack config + config options.

  const config = require('@fbi-js/webpack-config-react').default
  
  module.exports = config({
    options: {
      isTs: true
      // ...
    },
    webpackConfig: {
      // plaint webpack config goes here
    }
  })

Other Configs

• eslint: eslintConfig field in package.json. docs
• stylelint: stylelint field in package.json. docs
• browserslist: browserslist field in package.json. docs
• prettier: prettier field in package.json. docs

Development

Build your own factory-web based on @fbi-js/factory-web,

Create a project

npx fbi create @fbi-js/factory-factory

npm i @fbi-js/factory-web

Create and modify files

// src/index.ts

import FactoryWebBase from '@fbi-js/factory-web'

import CommandX from './commands/my-command'
import TemplateX from './templates/my-template'

const { name, description } = require('../package.json')

export default class FactoryWeb extends FactoryWebBase {
  id = name
  description = description

  // 1. replace default commands and templates
  commands = [new CommandX(this)]
  templates = [new TemplateX(this)]

  constructor () {
    super()

    // 2. OR: extends default commands and templates
    // this.commands.push(new CommandX(this))
    // this.templates.push(new TemplateX(this))
  }
}

Compile ts files

yarn build

Test

fbi link

fbi create

Changelog

Contribution

Please make sure to read the Contributing Guide before making a pull request.

Thank you to all the people who already contributed to fbi factory!

License

Licensed under MIT.

todo

• 生成 copys 和 renders 的路径