I am using react-gantt-timeline (https://www.npmjs.com/package/react-gantt-timeline ) library and need to modify css and some javascript to meet my demand. I tried to fork and then link back my project in which I was successful but my it's not a good solution since I need to also maintain the forked project.
In that case what will be the standard way to modify the npm package outside of npm module?
One way I was thinking is to import the css and javascript locally and then modify it. But I was unable to refer them properly.
Related
I have a npm package that we use for multiple projects. Currently when I want to make a change to something on these projects that requires a change on the npm package I need to make a change to the npm package, submit a pr, wait for someone to merge it for me and then I can actually test the changes I made on the other projects (no testing is set up currently sadly).
What I want to do is on the other projects have a way to install / use the local module instead of the global one so I can test the full flow before I submit any prs. Im using config package and ideally I can set it up so if I use a specific config file it defaults to local npm package instead of global.
Is this possible?
Based on what you are describing, take look at the link command offered by package managers to help solve this:
https://classic.yarnpkg.com/en/docs/cli/link#search
https://docs.npmjs.com/cli/v8/commands/npm-link
I have an NPM module that uses another local NPM module containing shared code. Neither of them are public, this is all local.
I import the shared module in my package.json like so:
"my-shared": "file:../my-shared-code"
When I npm install, my-shared-code gets imported correctly, and I can import code like:
import Blah from 'my-shared/src/sharedTypes';
Problem
I have to use the word "src" in the import. However, when I build I create a build directory, which breaks all these imports!
I was wondering if I could use NPM to map the imports somehow?
Can I make it so I don't have to use the word "src" at all?
Could I just do:
import Blah from 'my-shared/sharedTypes';
and then it magically figures out whether to use the "src" or "build" dirs?
What I tried
I looked into the options for package.json, and there is a "files" property that I thought might help. However I think that just whitelists files.
I also looked into the "main" property, however I'm not "exporting a module". I just have a load of utility files that I wanna be able to import into multiple other projects.
What I'm actually trying to achieve
I'm using typescript, and I've got a front-end and a backend that both share types for certain models, but also share some utility functions.
I want my typescript/react front-end and my typescript backend to be able to import typescript files from another node_package, however it needs to know to use "src" for development and "build" when built for production.
While it's not exactly what you're asking for, you might be looking for npm link. It's not intuitive, but it's what I use for your above situation.
npm-link is a way of registering local projects so that others can reference them. Just beware that reading the docs is important -- using it may impact your local environment in non-obvious ways (especially if you build and publish directly from your machine--versus CI/CD).
In the consumer project you can use path mapping --> https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
As for the package, you can re-export using export * from './my-file' syntax, in a index.ts file (you may need one at each directory). But this is tedious if you have a lot of files. (imperfect example)
Another solution seems to make a script to copy the package.json into the dist folder and make the build there.
There is a similar discussion there: How to npm publish specific folder but as package root
I am currently working on making a web extension application(chrome app) and I want to use npm in my application. When I want to use npm on my computer, I had to simply download and install it on my computer. But if I want to put it into my application, I am not sure how to include this.
Like bootstrap, do I need to include a min.js file such as bootstrap.min.js?
(what I want to do with npm is to make a crawling to happen using cheeriojs!)
Is there anyone who knows how to include npm in this case?
Thanks in advance!! Any advice would be much appreciated! :)
npm is a package management tool. It has no place being in a Chrome extension.
If you want to use packages from NPM in a browser extension, then you'll typically want to use a tool like Webpack to transpile them from module format into a single ES5 file.
Note, however, that cheeriojs is:
Fast, flexible & lean implementation of core jQuery designed specifically for the server.
… and since you want to run this in a browser, you should probably just use jQuery!
I've built a custom style "skin" on top of bootstrap that I intend to use in multiple UI projects.
Rather than copying/pasting the UI styles/components (built using sass and typescript in my current Angular 5 project), I want to build an NPM package that I can install these styles and components I've built in new projects, thus allowing updates to be done to the NPM package (maybe extending the controls within for example) without breaking the UI's using them or needing to update files within.
I've never setup an NPM project before. I've found a number of examples of how to build NPM packages, for example https://codeforgeek.com/2014/08/how-to-create-nodejs-npm-package/ but it seems to be for vanilla JS in this example. I need an example which:
Builds on a dependency, in this case bootstrap
Is to be used in Angular (I'm using version 5)
Is installable and updatable via NPM or maybe Yarn
Has anyone any top tips on achieving the above? Or any really clear guides where someone has done this before?
I realise this question is relatively broad but really I just need some pointers to get started and I will document the process further when I have a better understanding.
Thanks in advance!
So you should move your theme into a separate project. Then all you have to do is run npm init in that directory and you have a npm.
As for sharing it between projects, I would create a repo on Github for this theme npm. Push all of your changes there. Then you can reference it in the package.json of all your projects by linking to the Github repo. Here is a good Stack question about how to do that.
Finally, if you want to develop your theme locally inside one of your projects, you can use npm link. Here are he docs on that.
I'm trying to learn how to create and publish an npm package.
I have created an npm package, https://github.com/nitte93/OnBoarding
for my learning purpose.
https://www.npmjs.com/package/onBoarding
It works fine in dev build, but when I try to import it in my isomorphic react app, I get : ReferenceError: window is not defined
I have not made any explicit use of the window object in the package, but there are places where I have explicitly use jquery.
Now, I am not sure but all I understood was, that while importing this npm package in my isomorphic app, I'm trying to use the window object in NODE environment, which I assume is wrong since window object is only accessible on the browser side.
My question is how do I handle this.
1) Do I need to handle this in my npm package itself.
2)Should I handle it in my Isomorphic app? How?
Please answer or point to a right resource to solve this issue.
I looked through your repository, and the only thing I think could be the culprit is that the semantic-ui vendor js files are required in the OnBoarding.js component, which I assume is also a server rendered file. You need to instead require those packages that only run on the browser inside the client file (the one that will call ReactDom.render().. I think it's /src/example/index.js).
Also, as a rule of thumb don't put any browser specific code in componentWillMount, as that does get called on the server. componentDidMount is safe, though, as it's only called in the browser.