Develop Reference

vite: how to handle "require" statement in third-party module?

I use an UI library which has "require" statement.
I can use vite to run development mode successfully.
but when I build and preview the dist, the browser fail: Uncaught ReferenceError: require is not defined, because there are some "require" statement in the vendor chunk.
I have tried #rollup/plugin-node-resolve, #originjs/vite-plugin-commonjs but it doesn't work.
How can I fix that ?

You can fix it by using bundler like Webpack or Rollup to build your application for production. These bundlers can handle the require statements and convert them into valid JavaScript that can run in a browser. In your Rollup configuration, you can add the #rollup/plugin-commonjs plugin to handle the require statements. Then, instead of using Vite to build and preview the dist, use Rollup with the following command:
rollup -c
This will run the Rollup build process using the configuration specified in your rollup.config.js file.
#rollup/plugin-node-resolve, #originjs/vite-plugin-commonjs sometimes don't work if the library you are using has dependencies that are not compatible with CommonJS.

many library provide 'run esmodule' method. or try replace require() to import

How to make webpack ignore library dependencies?

I have a node library that I'm developing called 'MyLib' that is compiled to a dist/my-lib.js file using the webpack command.
Now, I have another project that makes use of that library. I "included" it by doing:
npm install --save ../../my-library
And in my project's index.js I can do:
import { ExportedClass } from 'my-library'
...
const ec = new ExportedClass()
So far so good. Now, I make some changes to the lib and include some feature that uses a certain babel config, then I build the library and go back to the main project, but now the main project fails to compile and complains about a missing/disabled babel-loader config? Why?
Error in /.../my-library/src/MyClass.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /.../my-library/src/MyClass.js: Support for the experimental syntax 'classProperties' isn't currently enabled (17:14)
Isn't the purpose of building the other library is to be able to just import and use it? Why do I have to replicate its build env and dependencies in my project?
For context: Both my project and library are built using webpack and in development mode with target: node.

browserify: bundle library and extend it afterwards

I'm working on a library using browserify. I have an entry point e.js which requires the files a.js b.js c.js.
As long as i'm just bundling the complete library,
browserify -e e.js -o dist/lib.js works just fine.
However, I'd like the library to be extensible by others. They should be able to load lib.js in their code and then require('./c.js')from the library.
Using factor-bundle it will always create a new dist/lib.jswhich is incompatible with the originally built one.
I guess using browserify -r with all internal dependencies to build dist/lib.jsand then doing a browserify -x ... -e module.js -o dist/module.js, externalizing all library dependencies will work, but isn't there an automated way of achieving this?
Is it possible to create a bundle with all dependencies being exported and then creating a second bundle for the add-on module which automatically externalizes everything from the first bundle?
Thanks for your answers!

Requiring module with karma not working

I create a dev Javascript environment using TDD by using node, jake, karma, chai and browserify. Everything works fine, tests run green. Now I want to use Raphael to draw SVGs. I installed raphael npm install raphael to my local node environment (not globally). Requiring
var raphael = require("node-raphael")
Whenever I require it in my app.js file, it throws an error:
Uncaught Error: Could not find module 'raphael' from '../Project/src/javascript/app.js'
Just for testing I required it in my jakefile which is in my Project directory. There, requiring works fine. But using the Raphael functions also does not work.
node modules are also placed in the Project dir. "Project/node-modules/raphael"

I haven't used raphael, but from looking at npmjs.com there are two different modules: raphael and node-raphael. You have installed raphael, but you are requiring node-raphael. So, you either need to install node-raphael:
npm install node-raphael
or require raphael in your code:
var raphael = require("raphael")
See https://www.npmjs.com/package/raphael and https://www.npmjs.com/package/node-raphael.

Bundle node js code into one file?

I have tried using browserify etc... But they include browser specific code. I just want one javascript file to contain all my server side app.
I want to compile all the disparate sources of a server side node.js app into one file "app.js" so I can distribute it by itself and it contains all dependencies it requires inside the one file.
So if I had:
one.js
require('./two.js')
two.js
console.log('two');
I'd run bundler one.js -o app.js
and app.js would look like:
console.log('two')
Ideally it would deal with the node system modules like fs, util, etc... intelligently. (I.e. probably not bundle them.)

Many nodejs modules require building or installation so you should consider distributing the node_modules folder or running npm install to install your app. If all the modules you use are simple js files with no further dependencies, I guess what you are looking for is to just merge the files together. You can easily do this with Gulp (and gulp-concat).
var gulp = require('gulp'),
concat = require('gulp-concat');
gulp.src(['imustbefirst.js', 'imustbesecond.js', '*.js'])
.pipe(concat('app.js'))

 .pipe(gulp.dest('./'))