Is it possible for a webpack bundle to load modules that are defined by other webpack bundles, without those bundles all having to be globally defined as a library (with libraryTarget and library in webpack config)?
Thus enabling me to reuse the original npm module names as the only reference to different modules.
Related
I have a local npm package, that contains other local npm packages
All of these packages are very similar, all uses vue, jquery, etc.
When i compile:
mix.js('index.js','dist/app.js').vue().extract();
The bundler analyzer shows in the vendor.js that every package contains its own node_modules and contains many packages duplicated.
How can avoid this?
I have a project comprised of:
module1/
module2/ (depends on module1)
mainmodule/ (depends on module2)
Is is possible to publish mainmodule without publishing module1 and module2?
I.e. to somehow bundle the local dependencies inside of mainmodule?
Are you importing the dependency module using import or require? If yes, yes you can create a unique bundle from your mainmodule using a bundler like webpack.
Inside your mainmodule, you just need a package.json file and Webpack installed locally or globally. After that just run this command
webpack mainmodule.js -o bundle.js
and Webpack will bundle all the modules together is just one module.
Does it make sense to put any modules into package.json dependencies when I use webpack?
When I want to develope a package, I use git clone <url> then npm install, then npm installs all dependencies and devDependencies from package.json file and it makes sense.
When I'm end-user and I just want to install some package into my node_modules to use it in my project, I run npm install package-name, then npm installs package-name with only its dependencies, and it makes sense too.
But does it make sense to put any modules into dependencies when I use webpack? The webpack will bundle all dependencies into eg. bundle.js, so, for me, there is no need to install dependencies then (while they're included into bundle.js file).
Let's assume that I put all neccessary modules into devDependencies (keep the dependencies object empty) for my project: my-project, bundle it with webpack and publish:
the developer-user will use git clone <url to my_project>, then run npm install, then npm will install devDependencies from package.json (and ommit empty dependencies object), then it is ready to develope.
the end-user will use npm install my-project, then npm will install my-project, do not install devDependencies (because this is for production) and do not install dependencies (because dependencies object in package.json remain empty). Putting anything into dependencies would double the dependencies: both the dependencies would be installed, and the same dependencies would be accessible in the bundle.js file.
Am I right?
You are correct that there may be no dependencies once it's been transpiled with webpack. However, some packages are multi-purpose and may be used in multiple ways, so in some circumstances dependencies may still be required.
If you look at the package.json specification, there are two possible entry points, 'main' and 'browser'. There is also the proposed 'module' entry point. It is currently under discussion about how to handle these in webpack and users seem to want webpack to prioritize them as module > browser > main, however browser is currently used by webpack first.
The idea behind prioritizing them in the order module > browser > main is presumably that browsers could use the pre-transpiled stuff directly in "browser", whereas another project calling require() or include() on your package would use non-transpiled code from the "module" entry. The "module" entry code could contain modern JavaScript with new features and the project/package requiring it could then transpile it to their own specifications, using "browserslist" for example.
I found this question because I was wondering the same thing...
I have a custom NPM module which requires other SASS based NPM modules eg Breakpoint SASS and Susy.
In my modules package.json:
"dependencies": {
"breakpoint-sass": "^2.7.0",
"susy": "^2.2.12"
}
When I was using NPM v2 the dependnacies were nested. So in my module's SASS file I could just include the dependancies with this:
#import './node_modules/breakpoint-sass/stylesheets/breakpoint';
#import './node_modules/susy/sass/susy';
However as of NPM v3 dependancies are now installed as a flat structure.
In my projct root:
node_modules/custom
node_modules/breakpoint-sass
node_modules/susy
As I'm using Gulp SASS Ive got this working in 1 project using includePaths. However as a custom build task is required my module is essentially broken. Is there a solution to this?
I considered using a naked node-sass implementation within the module which would use includePaths, but this seems like a lot of work just to resolve a path.
A separate but possibly related issue is that I have fonts in my custom module which Im importing with #font-face in my custom module's SASS file. When I import my module's SASS file into my main project's SASS file then the #font-face paths are wrong.
I'm new to jspm, transitioning from npm-only. I have one fundamental question. I have some dependencies in the package.json, and I runned jspm init, which created a nice jspm config.js file. My question is, what it the point of installing these packages from jspm (via jspm install ...)? Why not just install them through npm?
More specifically, in my package.json, what's the difference between putting these packages inside dependencies: {} vs inside jspm.dependencies: {}
Assuming that you are building a webapp jspm is more suitable for managing your frontend dependencies than npm. I think for a webapp npm only makes sense when used together with browserify. One key benefit of jspm is that you can load your dependencies using SystemJS & the ES6 Module Loader Polyfill.
This enables you to load the dependencies in the browser using the ES6 module syntax.
E.g.:
import 'jquery';
Keep in mind that jspm is ment to be used for your frontend dependencies.
For your dependencies used for the build process you should keep using npm.