4903d4baa8
Adding the packages the new donate stuff is using to the repository so that they do not need to be downloaded to run lektor. I had to make some modifications to the setup.py files for these modules in order to get them to work. Otherwise I was getting errors about invalid syntax in the requires.txt files and also one of the modules was requiring lektor which was pulling in a bunch of stuff that's not needed because we are running inside lektor. I put all these changes in patch files in a new patches subdirectory. |
||
---|---|---|
.. | ||
lektor_npm_support.egg-info | ||
CHANGELOG.md | ||
lektor_npm_support.py | ||
LICENSE.md | ||
MANIFEST.in | ||
PKG-INFO | ||
README.md | ||
setup.cfg | ||
setup.py |
lektor-npm-support
lektor-npm-support
makes it easy to use Parcel, webpack, browserify, or any other tool to build assets for Lektor projects.
Enabling the Plugin
To enable the plugin, run this command while inside your Lektor project directory:
lektor plugins add lektor-npm-support
Example: Creating a Parcel Project
Create a parcel/
folder and inside that folder create the following files:
configs/npm-support.ini
This file instructs the plugin how to generate the assets:
[parcel]
npm = yarn
watch_script = watch
build_script = build
- The section name
[parcel]
is the name of the folder where the Parcel project is located. npm
is the package manager command used to build the project. This example will use Yarn.watch_script
is the npm script used inlektor server -f npm
,build_script
is the npm script used inlektor build -f npm
.
This plugin supports more than one such entry.
parcel/package.json
This is a standard package.json
file. It should contain two entries in the scripts
section. The build
script is used during lektor build -f npm
, and the watch
script is used during lektor server -f npm
.
{
"name": "my-parcel-project",
"version": "1.0.0",
"scripts": {
"watch": "NODE_ENV=development parcel --out-dir=../assets/static/gen --out-file=main.js --public-url=./assets/ main.js",
"build": "NODE_ENV=production parcel build --out-dir=../assets/static/gen --out-file=main.js --public-url=./assets/ main.js"
},
"private": true
}
Now we can use yarn add
to add Parcel, Babel and Sass:
$ cd </path/to/your/lektor/project>/parcel
$ yarn add parcel-bundler babel-preset-env node-sass
parcel/babelr.rc
Next up is a simple Babel config file, using the recommended env
preset.
{
"presets": ["env"]
}
parcel/main.scss
A simple SCSS file.
body {
border: 10px solid red;
}
parcel/main.js
A simple Javascript file that imports the SCSS file so that Parcel will know to include it as well.
import './main.scss';
Running the Server
Now you're ready to go. When you run lektor server
nothing wil happen,
instead you need to now run it as lektor server -f npm
which
will enable the Parcel build. Parcel will automatically build your files
into assets/static/gen
and this is where Lektor will then pick up the
files. This is done so that you can ship the generated assets
to others that might not have these tools, which simplifies using a
Lektor website that use this plugin.
Manual Builds
To manually trigger a build that also invokes webpack you can use lektor build -f npm
.
Including The Files
Now you need to include the files in your template. This will do it:
<link rel="stylesheet" href="{{ '/static/gen/main.css'| asseturl }}">
<script type=text/javascript src="{{ '/static/gen/main.js'| asseturl }}" charset="utf-8"></script>
Complete Working Example
The examples
folder of this repository contains working projects.
Credits
This plugin is based on the official lektor-webpack-support Lektor plugin by Armin Ronacher.