┌─────────────────┐
│ ┌┬┐┌─┐┬ ┌┬┐┌─┐ │
│ │││├─┤│ ││││ │ │
│ ┴ ┴┴ ┴┴─┘┴ ┴└─┘ │
└─────────────────┘
A cli interface to build Javascript applications with zero configuration.
- Installation
- Available commands
- Available options
- malmo.config.js
- malmo.loaders-config.js
- malmo.plugins-config.js
- malmo.webpack-config.js
- malmo.express-config.js
- Configuration format
- Merge strategy
- Environment variables
- Shared node packages
- With yarn:
yarn global add malmo
- With npm:
npm install -g malmo
malmo init
Initialize configuration wizard. Remote and locale packages that containmalmo
andstarter-kit
in their names will be listed.malmo dev
Launch dev servermalmo build
Build your applicationmalmo config
Print current configuration
-h, --help
Print the usage guide-v, --version
Print package version-w, --watch
Restart compilation on configuration files changes--env [key]
Useenv[key]
configuration frommalmo.config.js
-
Use this file for overwrite or extend all the settings used by the malmo cli:
Parameter | Description | Type | Required | Default | Available in the global CONSTANTS object |
---|---|---|---|---|---|
bootstrapExpressApp | Invoke Express.listen method | boolean | NODE_ENV === 'production' |
true | |
clean | Clean dist folder before launch dev server |
boolean | true |
false | |
dist | Name of the dist folder |
string | dist |
false | |
publicPath | Webpack output.publicPath setting |
string | `` | true | |
port | Express application port | number | first available port | true | |
root | The project browser address, opened after malmo dev |
number | {PROTOCOL}://{IP}:{PORT} |
true | |
staticFolder | The public folder where all the bundled files will be placed | string | `` | false | |
https.key | Key certificate path | string | `` | false | |
https.cert | Cert certificate path | string | `` | false |
Each setting is overwritable with the env
key:
module.exports = {
bootstrapExpressApp: true,
foo: 100, // custom constant, see above
env: {
staging: {
bootstrapExpressApp: false,
foo: 200,
}
}
}
Thanks to webpack.DefinePlugin
, those settings are propagated from malmo
to each webpack entries in the global CONSTANTS
object:
malmo dev
/* global CONSTANTS */
console.log(CONSTANTS.foo) // 100
malmo dev --env=staging
/* global CONSTANTS */
console.log(CONSTANTS.foo) // 200
Use this configuration for overwrite or extend all the settings used by the default malmo webpack loaders:
Key | Options |
---|---|
cssHot | see https://github.com/shepherdwind/css-hot-loader for all the available options |
css | see https://webpack.js.org/loaders/css-loader for all the available options |
cssNodeModules | css-loader settings applied to the node_modules folder |
scss | see https://webpack.js.org/loaders/sass-loader for all the available options |
file | see https://webpack.js.org/loaders/file-loader for all the available options |
js | see https://github.com/babel/babel-loader for all the available options |
If you need to add same external folders to the babel transpile, use the js.include
option:
const path = require('path');
module.exports = {
js: {
include: path.resolve(__dirname, 'node_modules', 'my-module')
}
}
Use this configuration for overwrite or extend all the settings used by the default malmo webpack plugins:
Key | Options |
---|---|
miniCssExtractPlugin | see https://webpack.js.org/plugins/mini-css-extract-plugin for all the available options |
uglifyJsPlugin | see https://www.npmjs.com/package/uglifyjs-webpack-plugin for all the available options |
htmlWebpackPlugin | see https://github.com/jantimon/html-webpack-plugin#options for all the available options |
module.exports = {
htmlWebpackPlugin: {
title: "Project Title"
}
}
Use this configuration for extend the webpack configuration:
module.exports = {
module: {
rules: [
{
test: /\.(glsl|frag|vert)$/,
use: [
'raw-loader',
'glslify-loader',
],
},
],
},
}
Use this configuration for extend the express application used in ssr mode:
const cors = require('cors');
module.exports = (app, options) => {
app.use(cors());
return app;
};
Each configuration can be written as a simple js object, or as a function that returns an object. The object will be merged with the defaults thanks to the webpack-merge package. If you use a function, all the settings are passed as arguments:
- malmo.loaders-config.js
- malmo.plugins-config.js
- malmo.webpack-config.js
module.exports = ({
foo,
port,
others...
}) => ({
})
- malmo.express-config.js
module.exports = (app, {
foo,
port,
others...
}) => ({
})
For customize the webpack-merge
strategy, export a named variable called strategy
:
module.exports = { ... };
module.exports.strategy = { css: 'replace' };
This are the environment variables available in all the configuration files:
Key | Description |
---|---|
process.env.SERVER |
true if the configuration is used by the server.js entry |
process.env.NODE_ENV |
development or production , based on the launched command |
process.env.PORT |
the node process port |
In all the configuration files, these modules are linked from the malmo
folder, so it's not necessary to install them:
- express
- modernizr
- html-webpack-plugin
- mini-css-extract-plugin
- uglifyjs-webpack-plugin
- webpack
- webpack-merge