Skip to content

fbi-js/factory-web

Repository files navigation

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

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 的路径