I'm using the standard Svelte template with Rollup and have not been able to successfully import Paper.js.
I installed paper via:
npm install paper
and I get this output trying to do npm run dev after importing Paper:
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
acorn (guessing 'acorn')
Acorn is a dependency of the paper-full.js disto, and I'm looking to map
import { paper } from "paper";
to paper-core.js (although it would be very cool to get PaperScript from the full distro working in Svelte, but that's likely a whole other can of worms).
I'm wondering what kind of Rollup config I would need to add to resolve this.
Here's the repo I'm working on if you'd like some more context or a quick way to jump to exactly where I'm at.
UPDATE: Got it working! I had forgotten to install acorn as a dependency. I also switched to installing them both as devDependencies since rollup bundles everything. -- solution credit to Antony in the Svelte Discord
Related
(not a native speaker, sorry if things don't seems clear)
We are devs for a clients and we work with others devs from another company. The other devs make us a package that we sometimes change this in it, then submit the changes in a pull request.
So we end up having a local version of the package and the official version. And so we want to use the local version in dev (where we might make little changes in the package to match what the client want), and the official in prod (where our changes and other devs changes are merges).
I will show an example that don't work but that can help understand the idea:
[...]
"dependencies"{
[...]
"package":"prod-package"
},
"devDependencies"{
[...]
"package":"local/version/of/package"
},
and so, we should have this:
npm build # use local/version/of/package
npm build --prod # use prod-package
I'm not really good with npm (in fact, beside npm install and npm remove, I basically know nothing), so I might ask something obvious, but I can't find the answer anywere.
Have you tried using npm-link to link to the local version of the package you are consuming? That way, you could still commit your changes to the package back to the vendor.
https://docs.npmjs.com/cli/v8/commands/npm-link
You would essentially run npm link in the checked-out-from-VCS (git?) package folder, then you switch back to your project where you are consuming that package and run npm link {name-of-npm-package}
This would allow you to develop on that version locally, make your changes (and they will show up on VCS for easy pull request management).
I am getting rid of lodash, so some stuff I am redoing in es6 and other like this one I would like to keep but just this one function.
I see there is this npm https://www.npmjs.com/package/lodash.minby but im not sure if i install this it will only install this, or the whole library, can anyone please confirm?
Thanks.
From the documentation:
The lodash method _.minBy exported as a Node.js module.
So, yes, it just installs this specific function from lodash
Yes, if you install lodash.minby, at the time of this writing, you will get version 4.6.0 which contains a package.json file, a README.md file, a LICENSE file, and an index.js file. It has no other dependencies, so that is all you will get. The index.js file is over 2000 lines long, but that's what it takes apparently to implement the functionality.
In contrast, at the time of this writing, npm install lodash will give you version 4.17.21 which contains over 44000 lines of JavaScript spread out across many files. So that's about 22 times as large.
I am new, and when i first created my app based on the documentation using npm create-react-app i found it there were a lot of package included inside folder node_module when i code and i only use react and react DOM and etc from the basic.
node_modules
acorn
timer
ansi
and many more
I wonder if anyone can help my how to understand each use inside the node_module or where can i find the documentation for each use?
or how can i just reduce to what i want to use only to decrease the app size?
The answers are 2:
because you're using an automated scaffolding tool, which essentially does everything for you, and, you have just to code, it is supposed to locally deploy all the packages it needs to work (for example webpack is needed to bundle your code, babel to transpile it, ...
under node_modules you will find all the packages of the whole app. That's means you will find both your dependencies and the dependencies of your dependencies (this rule has some exceptions and you can find them in the npm documentation.
example:
// your code depends on A
var dependency = require('A');
// but then, inside your A dependency you can also find something similar to:
var b = require('B');
how can i just reduce to what i want to use only to decrease the app size?
You basically can't do it. They are all needed.
Most of the libraries that we pull from npm have dependencies. You may use only react and react-dom but there are react-scripts that require lots of stuff. I don't think that you have to worry about the size of the node_modules. That's not what you are suppose to ship in production.
If you want to see what are these all modules about you may open their folder and fine README.md file.
I have two npm projects, project-a and project-b. They both publish and ought to be able to be directly depended upon by any npm project in my company. project-a depends on project-b. They both live as siblings in the same Git repo.
I want to directly import certain components from project-b into project-a. I'm very close -- by specifying a resolve.alias in project-a that looks like project-b: path.resolve(__dirname, '../project-b/entrypoint.js') I can pull in what entrypoint.js offers. However, when Webpack attempts to resolve what entrypoint imports, it looks first in project-b/node_modules. This is a problem for two reasons: we use React, so this pulls in multiple copies of React (project-a/node_modules/react and project-b/node_modules/react), which React users know will break the UI, and similarly it pulls in multiple copies of any shared dependency, of which there are many, leading to a considerable amount of otherwise benign bloat in the Webpack artifact of project-a.
My hunch is there must be a way to tell webpack to, when resolving imports in project-b, first look in project-a and failing that go ahead and look in project-b. This way it'll first look in project-a/node_modules for react whether the import statement is in project-a or project-b, leading to only project-a/node_modules copies of shared dependencies in project-a's artifact, while successfully allowing unique project-b dependencies / components to be resolved. I've played around a bunch with resolve.root, resolve.modulesDirectories, and resolve.fallback, but haven't been able to achieve what I want.
Any ideas?
I ran into a similar issue in my project, also with multiple copies of React being included in the bundle.
The solution is quite simple -- add this to your webpack (version 2) configuration under the resolve key:
modules: [path.resolve(__dirname, "node_modules"), "node_modules"]
This instructs webpack to resolve in node_modules within the build directory before resolving in node_modules in other directories. In your case, this should mean that the module is grabbed from project-a/node_modules instead of project-b/node_modules.
You can find more documentation here.
I'm putting together a streamlined development process with react and react-native that:
encourages packages,
uses babel to transform es6 to js (it compiles before publishing/installing),
has a playground that let's you play with both native and web components.
The web part of it is perfectly fine. It's the native one that's causing issues and it has to do with react-native's packager.
The bottom line is: if the package is either linked through npm link or required directly from the playground as in require('../../') react-native's dependency resolver will go forever trying to identify dependencies inside my package's node_modules, most times it never finishes doing it.
The temporary solution I've found is to install the package in playground but this involves re-installing it every time I do an update, which isn't great because you can't see your changes right away (even if it would be automated, it would take time).
I believe that a better solution would be to ask the dependency resolver to ignore those specific modules I don't need (those in devDependencies mainly!). I tried mangling react-native/packager/blacklist.js by adding paths to that list and even putting checks against the dependency resolver but none of that would work.
Can someone with more experience with the packager give me a hint as to how I'd go about making the dependency resolver pass? Alternatively, it would be great if the packager could be separated and the transform process left to choice but I don't know if that would be doable either.
I found out the following solution, based on the comment in default.config.js:
* If you need to override any of this functions do so by defining the file
* `rn-cli.config.js` on the root of your project with the functions you need
* to tweak.
Create a rn-cli.config.js in the root of your project with the following contents:
var blacklist = require('react-native/packager/blacklist');
var config = {
getBlacklistRE(platform) {
return blacklist([
/node_modules\/my-package\/excluded-dir\/.*/
]);
}
};
module.exports = config;
The second argument to the blacklist function is an additional list of blacklisted paths, which can be regular expressions. See react-native/packager/blacklist.js for more examples.