-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs(plugins): update plugin developer docs wrt NODE_PATH #10028
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,11 +5,12 @@ | |
- `plugin.js` - instructs Lighthouse to run the plugin's own `preload-as.js` audit; describes the new category and its details for the report | ||
- `audits/preload-as.js` - the new audit to run in addition to Lighthouse's default audits | ||
|
||
# To develop | ||
## To develop as a plugin developer | ||
|
||
Run the following in an empty folder to start of with the code in this recipe: | ||
Run the following to start of with the recipe as a template: | ||
|
||
```sh | ||
mkdir lighthouse-plugin-example && cd lighthouse-plugin-example | ||
curl -L https://github.com/GoogleChrome/lighthouse/archive/master.zip | tar -xzv | ||
mv lighthouse-master/docs/recipes/lighthouse-plugin-example/* ./ | ||
rm -rf lighthouse-master | ||
|
@@ -19,25 +20,33 @@ Install and run just your plugin: | |
|
||
```sh | ||
yarn | ||
NODE_ENV=.. yarn lighthouse https://example.com --plugins=lighthouse-plugin-example --only-categories=lighthouse-plugin-example --view | ||
NODE_PATH=.. yarn lighthouse https://example.com --plugins=lighthouse-plugin-example --only-categories=lighthouse-plugin-example --view | ||
``` | ||
|
||
It may also speed up development if you gather once but iterate in audit mode. | ||
When you rename the plugin, be sure to rename its directory as well. | ||
|
||
### Iterating | ||
To speed up development, you can gather once and iterate by auditing repeatedly. | ||
|
||
```sh | ||
# Gather artifacts from the browser | ||
yarn lighthouse https://example.com --plugins=lighthouse-plugin-example --only-categories=lighthouse-plugin-example --gather-mode | ||
NODE_PATH=.. yarn lighthouse https://example.com --plugins=lighthouse-plugin-example --only-categories=lighthouse-plugin-example --gather-mode | ||
|
||
# and then iterate re-running this: | ||
yarn lighthouse https://example.com --plugins=lighthouse-plugin-example --only-categories=lighthouse-plugin-example --audit-mode --view | ||
NODE_PATH=.. yarn lighthouse https://example.com --plugins=lighthouse-plugin-example --only-categories=lighthouse-plugin-example --audit-mode --view | ||
``` | ||
|
||
## To run | ||
Finally, publish to NPM. | ||
|
||
## To run as a plugin user | ||
|
||
1. Install `lighthouse` v5 or later. | ||
2. Install the plugin as a (peer) dependency, parallel to `lighthouse`. | ||
3. Run `npx -p lighthouse lighthouse https://example.com --plugins=lighthouse-plugin-example --view` | ||
1. Install `lighthouse` (v5+) and the plugin `lighthouse-plugin-example`, likely as `devDependencies`. | ||
* `npm install -D lighthouse lighthouse-plugin-example` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. TIL |
||
1. To run your private lighthouse binary, you have three options | ||
1. `npx --no-install lighthouse https://example.com --plugins=lighthouse-plugin-example --view` | ||
1. `yarn lighthouse https://example.com --plugins=lighthouse-plugin-example --view` | ||
1. Add an npm script calling `lighthouse` and run that. | ||
|
||
The input to `--plugins` will be loaded from `node_modules/`. | ||
|
||
## Result | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -183,13 +183,14 @@ function resolveModule(moduleIdentifier, configDir, category) { | |
return require.resolve(cwdPath); | ||
} catch (e) {} | ||
|
||
const errorString = | ||
'Unable to locate ' + | ||
(category ? `${category}: ` : '') + | ||
`${moduleIdentifier} (tried to require() from '${__dirname}' and load from '${cwdPath}'`; | ||
let errorString = 'Unable to locate ' + (category ? `${category}: ` : '') + | ||
`\`${moduleIdentifier}\`. | ||
Tried to require() from these locations: | ||
${__dirname} | ||
${cwdPath}`; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. we might also spit out There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sounds good. I started this but i'm going to split into a separate PR because NODE_PATH from the node side starts to get pretty complex. |
||
|
||
if (!configDir) { | ||
throw new Error(errorString + ')'); | ||
throw new Error(errorString); | ||
} | ||
|
||
// Finally, try looking up relative to the config file path. Just like the | ||
|
@@ -200,7 +201,8 @@ function resolveModule(moduleIdentifier, configDir, category) { | |
return require.resolve(relativePath); | ||
} catch (requireError) {} | ||
|
||
throw new Error(errorString + ` and '${relativePath}')`); | ||
throw new Error(errorString + ` | ||
${relativePath}`); | ||
} | ||
|
||
module.exports = { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe? data just felt a bit weird 🤷♂