My higher goal is to create a .zip file with the server bundle and all needed assets.
That file can be then moved to another device and executed there (the other device has the same NodeJS version installed). Building this on the device is not an option, because it's offline.
build/
|- node_modules //this is where I would like to have my externals
|- server.bundle.js
|- public/
My current solution is to pick and copy the external modules by hand, which is neither scalable nor convenient.
Would there be a possiblity, to let webpack handle this for me? Or even bundling externals like express into the bundle itself.
You could have just express in the dependencyarray on package.json, then run npm install --productionto just install that, so your node_modules is going to be small.
In the webpack config, you have to be sure to add externals (webpack_externals). Due to some binaries in some node dependencies, webpack is not able to bundle them together. You are going to have a require call for just those dependencies.
Related
Could I treeshake node_modules when i build a nodejs backend project?
The node_modules is so big and there are too many small files in it,How can i treeshake it like the frontend do?
Too many small files in node_modules is not used in my project but when i want to deploy offline I must carry them from here to there.
node_modules
-- ramdajs
-- lodashjs
-- ...
How can I do treeshaking with node_modules in an express project.
The situation:
client and server both share a folder shared
when we change shared in our development flow, we want the corresponding references to change in customer and server
server works because somehow with npm it seems to work, shared and server use npm
customer doesn't work and uses yarn
mixed typescript and js project
Code Structure:
root/
|- client/
|- package.json
|- src/
|- ...
|- server/
|- package.json
|- src/
|- ...
|- shared/
|- package.json // we don't want to change version every change
|- src/
|- ...
What's been tried
3 solutions proposed here
create a folder common under root and just require the files you need from your files. But you could end up with "long" require such as require("../../../../../common/file")
long require doesn't work with resolution with webpack - and isn't a nice solution
use module-alias to avoid that problem: https://github.com/ilearnio/module-alias
module-alias seems to be the same solution as the next one, in how it behaves.
you could make common a local module (using file:) and install it in package.json https://docs.npmjs.com/files/package.json#local-paths
we currently do this, but we still have to reinstall the shared folder on a change, we currently use yarn upgrade shared which takes a long time and still requires us to know when we need to run it.
in addition we've attempted to get yarn link working but doesn't seem to link properly
we've attempted to use a post-pull hook with husky to run yarn upgrade shared but it's too slow to run every pull especially since it's not needed often
we've considered a true mono-repo 'package' like Lerna but still don't think that it's necessary for the cost to migrate
link-module-alias to sym link folders on post install script, but this fails with typescript files
Goal
either
find a way to automatically sync these in dev environement
find a solution that installs/updates manually - but is fast and can be run on every pull
find a way to automate running yarn upgrade shared that runs (roughly) only when needed not all the time
I guess we could find a way to automate the version increment on any change of shared's version key, and then it's tracked, we could run yarn install and that work work.
The find solution was that we were using React-Native and therefore the normal steps for syncing would work for the IDE but not the React-Native app.
Here is a great article describing how to get metro bundler working with it - however for Typescript we added it to the TSConfig and for the IDE we still needed to add it to our package using the file:../shared directive.
I would like to use a parent NPM package from inside a subfolder, as part of the development process. Let's call my library "logary".
Structure:
.
|- package.json
|- tsconfig.json
|- src
|- ... all the source code
|- dist
|- ... compiled TS as .js, .js.map and .d.ts
|- examples
|- with-nextjs
|- package.json
|- tsconfig.json
The library is written in TypeScript and so is the example. The parent compiles with outDir: ./dist in tsconfig.json. I have multiple entry points (one for the main lib, one for each peer dependency as for example: import withLogary from 'logary/plugins/nextjs'.
I would like to be able to write import Logary from 'logary'; inside ./examples/with-nextjs and have Logary, the constructor, have types attached to it be fully "resolvable" by the TypeScript compiler. I want changes in . to be reflected when ./examples/with-nextjs is reloaded.
It's not a monorepo (in the common sense). I've tried yarn link in . and then yarn link logary inside ./examples/with-nextjs, which doesn't seem to solve it (cannot import module). Furthermore, as I have bumped the version in . to 6.0.0, as I yarn install inside ./examples/with-nextjs, yarn complains that version is not published to npmjs.com and asks me to select a previous version, which it then downloads.
I know there's Lerna ("Splitting up large codebases into separate independently versioned packages is extremely useful for code sharing." — this is a tiny code-base and only has a single package, I just want to reference it in a single direction from an example) and Yarn Workspaces ("It allows you to setup multiple packages in such a way that you only need to run yarn install once to install all of them in a single pass." — which is not my aim)
I'm not interested in adding any special config (like paths) to tsconfig.json in ./examples/with-nextjs because then it's not just to copy the example to as your own app.
➡ How do I best structure a TypeScript library project with multiple peer dependencies and with an examples folder?
Maybe related?
Use yarn workspaces and typescript's project references to reference another package subdirectory — use exports in package.json to solve the logary/plugins/nextjs problem (I'm happy doing that, but I can't get the parent project properly linked with peers correctly installed, so just import Logary from 'logary' in the examples uses the old published version, despite me having run yarn link)
Peer Dependencies In A Monorepo — this is probably a good solution to the peer dependencies problem (e.g. with https://www.npmjs.com/package/rollup-plugin-peer-deps-external)
Using Lerna with unpublished packages — has a similar question, but doesn't ask about consume-only app packages like my with-nextjs. Also, my root is at . not at packages/logary; but maybe I must conform?
Using composite: true in tsconfig.json in . and also references in the child project's tsconfig.json changes how the outDir works; it adds the src/ folder as prefix to all output paths, which is not what I want
I have a project on Laravel 5.4; I'm absolutely new to front-end package managers.
I used npm to install 4 packages in my project, so my node_modules folder has about 210 MB.
I used Laravel Mix to combine in groups required dependencies and files, then I run npm run dev.
My webpack.mix.js looks like :
let mix = require('laravel-mix');
mix
.copy('node_modules/jquery/dist/jquery.js', 'public/js')
.combine([
'node_modules/video.js/dist/video-js.min.css',
'node_modules/videojs-record/dist/css/videojs.record.css'],'public/css/recordDependencies.css')
.combine([
'node_modules/video.js/dist/video.min.js',
'node_modules/recordrtc/RecordRTC.js',
'node_modules/webrtc-adapter/out/adapter.js',
'node_modules/videojs-record/dist/videojs.record.js',
'node_modules/jquery/dist/jquery.js',
'node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js',
'node_modules/blueimp-file-upload/js/jquery.iframe-transport.js',
'node_modules/blueimp-file-upload/js/jquery.fileupload.js'
], 'public/js/recordDependencies.js');
So, it generates me this files. Making a small test, I replaced the node_js directory out of the project, and everything still works.
So, the question is :
Can I delete this huge folder - node_modules, or it must live in
kernel of my project, at the deploying as well ?
In frontend applications node_modules are only required for compiling resources. You would not want to deploy node_modules because they contain unobfuscated code. Only deploy compiled files.
I have a project in which I use node-webkit. node-webkit allows npm packages to be used for developing desktop applications. I make use of grunt to build my application.
My folder structure looks like this at the moment:
project root
node_modules/ (1)
package.json (1)
App/
node_modules/ (2)
package.json (2)
bower.json
bower_components/
...
controllers/
filters/
...
app.js
The npm dependencies for the application itself are kept within the App folder, but the dev dependencies for building the project are not related to the application source code, so i keep them in node_modules (1) inside the root folder. I also know that in a package.json file one can express dependencies and dev dependencies, exactly for this reason. I would rather have one package.json file in the root expressing ALL dependencies, including dev dependencies, but i would rather have a separation of those dependencies on folder level.
Two questions arise:
Is this a good way to organize my npm dependencies? If yes, awesome? If no, which I expect:
What is a better way to organize my dependencies? Is it possible to specify that dev dependencies go into folder a, and 'regular' dependencies go into folder b? If so, how do I do this?
In case anyone is wondering, this is the project i am talking about:
https://github.com/michahell/pinbored-webkit
[updated folder structure to include app.js for clarity]
It is perfectly fine to keep more than one package.json file and multiple node_module directories for a project. If you consider the parts as separate components.
An example might be if, you have one directory containing a node server, another containing a react app, and a third containing some kind of deployment script written in javascript.
#Michael package.json file contains all the dependencies related to that project.There is no need for multiple package files and multiple node_modules folders..
But you need to check where is your App.js file!!
your App.js , package.json must be in same folder unless configured.