I am testing a module built for vuejs, but there is an annoying warning that I think I know how to solve (it's cited on its issues on github). I also tried with a console.log just to be sure.
I tried to correct it inside node_modules src directory but I fail to understand how to recompile it and use in my project. npm rebuild doesn't do anything and if I delete the "dist" directory of the module, nothing happens as well.
How could I do that? Should I wait and hope that the original author correct it? I'm just testing the module, I am not sure I am going to use it.
This is the repo: https://github.com/kamil-lip/bootstrap-vue-treeview
I've got quite some experience in (web) development (Java, ASP.NET and PHP amongst all), and fairly new to React and Node JS.
Although I did multiple tutorials and read multiple articles, I feel like I'm missing some point here and there. Currently I'm working on a React app which implements a nice HTML template I found.
One React tutorial I did used Webpack for building and deploying the app (local). This works nice, does the job of transpiling ES6 (.jsx) and SASS using babel. So far so good :)
My template has an image slider (Owl Carousel), so I installed the react-owl-carousel module.
This gave me quite some problems with jQuery (also installed as a module).
After several attempts to fix this I decided to move on to another slider module, React Awesome slider.
I used the module as the README.md explained. But upon building it (npm run build), I got an error that the .scss file within react-awesome-slider could not be transpiled. A message like "are you missing a loader".
So I installed sass, node-sass, sass-loader etc etc and configured these in my webpack.config.js.
I also noticed the react-awesome-slider module within node-modules contained a webpack.config.js.
Long story so far, sorry, now to the essence of this question.
In what way can the modules installed (like react-awesome-slider) be considered "black boxes"?
It doesn't feel logical that all the modules get build when building the main app. The "exclude: /node_modules/," config in webpack.config.js prevents this, not?
So why does the react-awesome-slider give an error about .scss transpiling? I had no .scss rule in my webpack config then.
Will all dependend modules automatically get installed when installing a new module? So when I run "npm i react-awesome-slider --save-dev", will its dependencies also be installed? Or is this not necessary? And do I need to update (webpack) configuration after installing a new module? Or is it really black box and "self-containing"?
Any help would greatly be appreciated!!! Maybe there is a good react-webpack sample app on Github or something like that?
That also confusing me for a really long time. Here are some answers to your question.
people publish packages to the NPM, so a module your project depends on
can be pre-builded or source code, it depends. I have checked react-awesome-slider, it's main field in package.json is dist/index.js, directly import it won't cause an issue because there are no SCSS files.If you follow the CSS module usage instruction you have import react-awesome-slider/src/styles and you will find src/styles.js file import ../styled.scss,so webpack will load it with SCSS loader which you have not configured, that's why an error occurred.
while you install modules, npm will go
through its dependency tree, install its dependencies, dependencies'
dependencies, until there's no more dependency module to install. before npm 3.0 the node_module folder is tree structure reflects the dependency tree, but it causes problems that many modules relay on the same dependency, npm will download and save too many same files, after version 3.0 it becomes flat(release note here, search flat keyword).
You don't need to update your webpack config after you install a dependency cause webpack build process will handle it with file dependency tree. You have installed a package and import it in your activation code, file there will be handle( with its package.json main field file as an entry), you have installed a package without using it or import it in a dead file(dead file means you cannot find it from webpack entry file), it will be ignored by webpack as it's dead code.
I have too many confuse until I read npm docs. Good luck to you.
Node modules are build to execute packages.When the are compiled they have proper configuration to handle extensions that are imported in it and when you import something like .scss in your main app then it does not know about that extension then your webpack need rules to include that extensions.
It does exclude node_modules as the are pre-converted pr pre build.
More over webpack is bit tough so developers create CRA Have look at it.
When trying to develop a library, npm link and npm link [libaryname] can be used to connect local packages for debugging.
For some reason when using it with the webpack dev server, it does not update the consumed package in the consumer project. The first time the project is run, it correctly imports the linked package. On subsequent runs the imported module stays the same as it was the first time it was run, despite the code of the package in node_modules being correct and up to date. It never changes from its initial state on the first run, even when removing and re-installing the referenced package.
Is there some caching mechanism at work that can be disabled? If not, where does webpack get the outdated sources from?
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.
I would like to download node module packages (listed in a package.json file, in the present working directory) source code to a node_modules subdirectory of the present working directory, without compiling, or installing those modules. Now I have seen the related question download source from npm without npm install xxx but that question dealt with downloading the source code of individual modules specified to NPM directly (i.e., without using a package.json file). The reason why I want to do this is because I am working on developing an Atom package for the Open Build Service (OBS) of openSUSE and this seems like one of the necessary steps I need to go through in order to achieve this.
The source code is not shipped with the npm distributed code. The best you could do is read the package.json and look for the { repository: url { } } key if it exists and if it's a git repo (which most of them will be) clone it.
However be aware that the source code often requires a build step before it can be used, as in an npm prepublish step defined in the source code. In modern Javascript projects a common example of this is transpiling ES6 code to ES5 code for use in NodeJS and the browser.
I have not made an Atom package but I'm fairly certain you don't need to do any of this.