Nitrogen Editor server plugin for Webpack
0. Who is the author of this tool?
Patryk "PsichiX" Budzyński (you can reach me on twitter @PsichiX
to ask any question)
1. Where can i find Webpack plugin for Nitrogen Editor and how to setup it?
Install it with npm install --save nitrogen-webpack-plugin
and then prepare your Webpack condig like this:
Example project integrated with Nitrogen Editor
var webpack = ;var path = ;var process = ;var CopyWebpackPlugin = ;var NitrogenWebpackPlugin = ; var BUILD_DIR = path;var APP_DIR = path;var EDITOR = !!processenvNITROGEN_EDITOR; var config = entry: 'babel-polyfill' APP_DIR + '/index.js' module: loaders: test : /\\.jsx?$/ include : APP_DIR loader : 'babel-loader' test: /\\.json$/ loader: 'json-loader' output: path: BUILD_DIR filename: 'app.js' plugins: from: 'static/index.html' from: 'static/assets' to: 'assets' devServer: contentBase: path devtool: 'source-map'; if !!EDITOR configplugins; moduleexports = config;
.nitrogenrc
file config should look like?
2. How
Nitrogen config (.nitrogenrc
) file consists of given properties:
port
: port number on which local server will rundirs
: list of directories visible in Nitrogen Editorsystems
: list of paths to code files of game systemscomponents
: list of paths to code files of game components/scriptseditors
: map of editors used (key
: pattern to match filenames;value
: name of editor installed module)editOnly
: iftrue
then files are edit-only (webpack will bundle project normally, instead of making special bundle for Nitrogen Editor)
3. How to create custom editor?
There are only few rules for custom Nitrogen editors/viewers:
- Library MUST use
react
dependency and return react component - Your editor MUST be bundled as library with name "editor", output filename
bin/index.js
withcommonjs
target - Your editor MUST export three properties:
name
with editor name;description
with editor description;editor
with react dummy-component function that can accept three special props (filename
of editable file;buffer
with file data;onEdit
callback to call when file contents should be saved)
Examples of editors: