Movatterモバイル変換

️🎉Features

Naturally: Make web developmentsimple,natural andpleasant.
Structure-Based:One configuration file can manage webapp projects with at least 90% use cases.
Learn Once, Run Any Webapps: Any front-end technology stack will be developed and built inthe same way.

️📦Installation

npm install --global balm-core balm-cli# See all available official templatesbalm listbalm init <template-name> <project-name>cd <project-name>npm install# OR `yarn`# For developmentnpm run dev# For productionnpm run prod

npm install --global balm-core balm-cli# /path/to/YOUR_WORKSPACEmkdir -p my-project/src/{styles,scripts}echo "Hello World" > my-project/src/index.html# Installing `balm`cd my-projectnpm install --save-dev balm# OR `yarn add --dev balm`# Config balmtouch balm.config.js# For developmentbalm go# For productionbalm go --production

Automatic
Manual

⚙Configuration

balm.config.js

module.exports = {  roots: {    source:'src'// Source code root (Create a directory in project)  },  styles: {    extname:'css'// Main style extension: css,scss,less  },  scripts: {    main:'./src/scripts/index.js'// The entry script (Create a javascript file)  }};

const config = {  server: {    open: true,    proxyOptions: {      target:'http://your.project.dev',// Target host      changeOrigin:true,// Needed for virtual hosted sites      pathFilter: '/api'    }  },  roots: {    source:'src'// Source code root (Create a directory in project)  },  paths: {    source: {      css:'styles',//   CSS dir: ./src/styles      js:'scripts',//    JS dir: ./src/scripts      img:'images',// Image dir: ./src/images      font:'fonts'//  Font dir: ./src/fonts    }  },  styles: {    extname:'css',// Main style extension: css,scss,less    sprites: ['icons']// Icons path: './src/images/icons'  },  scripts: {    entry: {// Custom vendors// HTML: <script src="%PUBLIC_URL%/scripts/vendor/mylib.js"></script>      mylib: ['your-project-vendors','your-project-plugins'],// The entry script (Create a javascript file)      main:'./src/scripts/index.js'    }  },  assets: {    root:'/path/to/your_remote_project',// Remote project root path    mainDir:'public',// Remote assets dir: '/path/to/your_remote_project/public'    subDir:'',// Remote assets subdir: `/path/to/your_remote_project/public/${subDir}`    cache:true  }};const api = (mix)=>{if (mix.env.isProd) {// Publish assets(styles,scripts,images,fonts,media)// from local `${roots.target}/{css,js,img,font,media}`// to `${assets.root}/${assets.mainDir}/${assets.subDir}`    mix.publish();// Publish html templates// from local `${roots.target}/index.html`// to remote `${assets.root}/views/new-filename.blade.php`    mix.publish([      {        input:'index.html',        output:'views',        renameOptions: {          basename:'new-filename',          suffix:'.blade',          extname:'.php'        }      }    ]);  }};module.exports = (balm) => {return {    config,    api  };};

Basic
Advanced