I use webpack 4 and electron-builder to bundle and build my Electron app. I noticed that native node modules inside the node_modules directory of the app.asar bundle still contain their C++ source files.
Is there a way to exclude certain file extensions from the build step?
electron-builder can exclude files in the files section of your package.json.
Default pattern / is not added to your custom if some of your patterns is not ignore (i.e. not starts with !). package.json and /node_modules// (only production dependencies will be copied) is added to your custom in any case. All default ignores are added in any case — you don’t need to repeat it if you configure own patterns.
Example
"!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}",
Related
First of all, I am generating an electron native application using electron-builder, npm and npx.
The next commands/steps are being executed to compile and generate the electron native application:
npm run build -- --prod --build-optimizer (to compile app)
npx electron-builder build --windows (to generate an electron windows app)
Later, I obtain a myApp folder which contains:
/win-unpacked
electron-builder-effective-config.yaml
myApp.exe
My application uses the node_modules folder which contains all node dependencies used in my application.
My question is: are there any way to unpack the native application or similar and patch new changes inside node_modules?
After perform an investigation, I have discovered that node dependencies are packed in system cache inside an app.asar file which contains a dist folder with some .js files.
In developer tools:
Inside app.asar:
Are there any way to "deploy" node modules folder with the aim to perform patch operations of each package and change the code inside node modules folders?
I will appreciate any kind of help.
Asar is a read only archiv format, so you cant patch any files in the archive.
But what you can do is to disable the asar option in your build config.
So in your package.json define it like this:
"build": {
"appid": "........",
"win": {........},
"asar": false
}
if you build this, there is no asar archive anymore and you can overwrite any file...
what you can also do is using asar programatically. So you can unpack the asar archive, updating files and package new archive. See here how you can use it
Contrary to what is being said here, patching a .asar archive is totally possible. I have published a library on NPM called patch-asar that does specifically this.
Is it possible to build a TS source into a single file, which would also contain node_modules imported packages' source?
That would be very helpful in a serverless project. I have done this before on a non-TS project but was using webpack (for another reason).
It seems this was briefly possible before but was due a bug https://github.com/Microsoft/TypeScript/issues/13414 ?
You will need to use a bundler such as webpack to bundle your compiled code and all your node_modules dependencies. The TypeScript compiler (tsc) just transforms TypeScript code into JavaScript, and won't deal with bundling.
I'm using electron-packager for creating an electron.exe of my app. I need to exclude all node modules . I tried the following
--ignore=node_modules
The above is not working. Any idea how to exclude all folders/ remove node modules in final build.
If you install modules as devDependencies, they will all be pruned automatically before packaging.
If you're using electron-builder you can define glob patterns as files in the config. In this case !**/node_modules/* will exclude all of node_modules.
If you're using electron-packager you can use the ignore option and regular expression to exclude files.
I start learning webpack , node , and react and I am bit confused about some basic staff.
Does webpack bundle whole react.js + my javascript files into one output file, so when deploying to production I don't need to install node packages used in project (assuming that they are added to webpack.config.js file) ?
If above is right:
On my server I just need to place index.html + output from
webpack ( bundle.js) ? ( In simple scenario) ?
package.json will be used only on development side ?
You only need index.html and the bundle.js (or any name you gave the file) for the app to work, provided that you are not using any local assets. You don't need to include node modules. Package.json should tell you what to include in your project so that you don't have to include node modules whenever you want to upload your project along with few other decalarations.
The way Webpack works is that you specify one or more entry points and one or more output files. Webpack then reads the entry point and also traverses through the import / require statements recursively. It then generates final bundle file(s) which includes all the traversed files.
Yes, Webpack outputs everything in the the bundle.js file(s). You can configure multiple output bundles. So, you just need HTML and output bundle to deploy the app.
The package.json specifies the packages upon which the app depends, apart from several other things. While traversing through the entry points, webpack will also include the packages specified in import / require. Function of package.json is to tell npm to install those packages.
I'm trying to figure out how to get webpack to watch an NPM linked dependency. I've tried to add an explicit entry pointing into the package, and I've tried to both explicitly included it and also not excluding /node_modules/ (which is quite common).
The scenario I want to achieve is as follows: I want to separate out parts of my react-based applications into component libraries (NPM packages).
Both the main package and the dependencies are written in ES6, so I've created a small gulp script that watches for changes in the dependent project, and transpiles its source (src/) to lib.
I've used npm link to wire in the dependent package so that I don't need to pack/publish/reinstall it every time I make a change.
When I make changes to the dependent package, the gulp tasks transpiles the code OK.
It is in the last part I am struggling; getting webpack watch to trigger a re-bundling when the dependency is refreshed by the forementioneds gulp task.
Make sure you transpiler script doesn't delete your old /lib dir, but overwrites files instead.
I had a similar problem with Webpack dev server not seeing changes because I was removing the /lib dir before every transpile.