nollup: Very high CPU usage using pnpm
Maybe I’ve done something wrong but even with the dumbest config ever I feel like I have an error while running nollup in order to get HMR working for my CSS and Javascript.
I always get this output in the terminal whatever config I’m using (tried many, from some other repos, etc). The only way for me to get it working is by using the examples as it from the examples
folder of this repo, which calls the cli from a javascript file. When I try to use the nollup -c
command, that’s when issues are coming by.
> npm run dev
> test-nollup@1.0.0 dev /Users/user/Desktop/Rollup
> nollup -c --hot --port 3000
Listening on http://localhost:3000
Compiled in 944ms.
Compiled in 441ms.
^C%
Also the node
process in my Activity monitor goes off the roof with at least 300% CPU.
This is my package.json
{
"name": "test-nollup",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=development nollup -c nollup.config.js -w --hot --content-base build --port 3000 --verbose",
"dev": "nollup -c --hot --port 3000"
},
"dependencies": {
"normalize.css": "^8.0.1"
},
"devDependencies": {
"@babel/core": "^7.8.3",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"@babel/runtime": "^7.8.3",
"@rollup/plugin-commonjs": "^11.0.1",
"@rollup/plugin-node-resolve": "^7.0.0",
"@rollup/plugin-replace": "^2.3.0",
"autoprefixer": "^9.7.4",
"cross-env": "^6.0.3",
"eslint-config-standard": "^14.1.0",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"node-sass": "^4.13.1",
"nollup": "^0.10.2",
"postcss": "^7.0.26",
"postcss-banner": "^3.0.1",
"postcss-preset-env": "^6.7.0",
"rollup": "^1.29.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-banner": "^0.2.1",
"rollup-plugin-browsersync": "^1.1.0",
"rollup-plugin-bundle-html": "^0.2.2",
"rollup-plugin-clear": "^2.0.7",
"rollup-plugin-dev": "^1.1.1",
"rollup-plugin-eslint": "^7.0.0",
"rollup-plugin-hot-css": "^0.0.6",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^5.2.0"
},
"browserslist": [
"> 0.5%",
"last 2 versions",
"not dead"
]
}
and my rollup.config.js
import resolve from '@rollup/plugin-node-resolve'
import replace from '@rollup/plugin-replace'
import commonjs from '@rollup/plugin-commonjs'
import babel from 'rollup-plugin-babel'
import devserver from 'rollup-plugin-dev'
import browsersync from 'rollup-plugin-browsersync'
import postcss from 'rollup-plugin-postcss'
import clear from 'rollup-plugin-clear'
import html from 'rollup-plugin-bundle-html'
import banner from 'rollup-plugin-banner'
import { terser } from 'rollup-plugin-terser'
import { eslint } from 'rollup-plugin-eslint'
import pkg from './package.json'
// import settings from './settings.json'
// Define environment and things
const mode = process.env.NODE_ENV
const watch = process.env.ROLLUP_WATCH
const dev = mode === 'development'
const workdir = dev ? 'build' : 'dist'
// Rollup config
export default {
input: 'src/main.js',
output: {
dir: dev ? 'build' : 'dist',
entryFileNames: '[name]-[hash].js',
chunkFileNames: '[name]-[hash].js',
sourcemap: dev,
format: 'cjs'
},
// Plugins
plugins: [
// Clean
// clear({
// targets: [ workdir ],
// watch: true
// }),
// Serve
// dev && watch && devserver({
// port: 3100,
// dirs: [ workdir ],
// basePath: '/'
// }),
// dev && watch && browsersync({
// port: 3000,
// proxy: 'http://localhost:3100',
// open: false,
// notify: false
// }),
// PostCSS with SASS/SCSS/Stylus
// postcss({
// extract: true,
// sourceMap: dev
// }),
// Javascript
// replace({
// 'process.browser': true,
// 'process.env.NODE_ENV': JSON.stringify(mode)
// }),
// resolve({
// browser: true
// }),
// commonjs(),
// eslint({
// exclude: ['**/*.scss', 'node_modules/**']
// }),
// babel({
// extensions: ['.js', '.mjs', '.html'],
// exclude: ['node_modules/**'],
// runtimeHelpers: true
// }),
// Build
// html({
// template: 'src/template.html',
// dest: workdir,
// filename: 'index.html'
// }),
// !dev && terser({
// module: true,
// output: {
// comments: false
// }
// }),
// !dev && banner(`${pkg.name} v${pkg.version}\nBy ${pkg.author.name}\n${pkg.author.url}`)
]
}
Am I missing something ? 🤪
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 21 (10 by maintainers)
Looks good to me! Thanks for the fix.
Great! I should hopefully have a fix for the first issue by tomorrow. 😃
You’re welcome, thanks for your ideas!
It’s purely to get some sync of style, navigation and scroll on all my devices (mobile, tablet, desktop) when developing for responsive and stuff, it’s very handy. I used to have it along the webpack-dev-server and worked like a charm.
There’s definitely something wrong with
pnpm
andchokidar
. While I can’t fully replicate the same issue, when I usepnpm
I get extremely long build times and high CPU usage. Commenting outchokidar
solves the problem. I found a couple of issues that probably hint at what’s going on:https://github.com/paulmillr/chokidar/issues/773 https://github.com/pnpm/pnpm/issues/119
Can you try this change directly in your node_modules in the dev middleware: