This has been bothering me for a long time, today I finally decided I need to get it solved. If this is off-topic, please kindly tell me where should I post this question.
I've been trying to use this javascript repository on github: https://github.com/jasondavies/d3-cloud. I know very little about github, node.js and npm, I just simply want to make a beautiful word cloud on my html page, but it seems everyone on github assume their readers are no newbies like me.
What I have tried:
I have downloaded the .zip file and extracted them into a project folder. Then under the folder I create a test.html file:
<head>
<script src="/project/build/d3.layout.cloud.js"></script>
</head>
<body>
<div id="test">
</div>
</body>
The DOC is very simple. Without any actual example, I don't know how to get started. I've tried
d3.layout.cloud('#test').start();
It doesn't work at all. The DOC does mention examples, there are only two files under the example folder. They are all node.js javascript files. So I can't directly use it because they use require. So I tried to install them on my linux server.
I create a project folder on my server, and then ran
git clone https://github.com/jasondavies/d3-cloud.git
Now there are two folders under folder project: d3-cloud and node_modules. Not knowing if I have successfully installed it, I went into folder d3-cloud and ran
npm i
Now the whole folder structure is like this:
I understand folder node_modules is dependencies but I am totally confused here.
When I first did git clone did I already install the package?
Is running npm i redundant? But it does create another node_modules folder and install a lot of things under it as the screenshot below shows:
Are these all dependencies of this javascript app? So many?
At this point, do I HAVE TO use some bundling tools such as webpack(I merely know the name upon some brief google search) in order to use the .js file on my webpage?
Related
I ran this command to create a ReactJS app
npx create-react-app learningapp
This created several folders now, I dont know which of them are important. I mean I dont know their purpose.
Can anyone explain their purpose in short?
node_modules -- very important, as this will contain all the npm packages and their entire list of dependencies installed.
public -- very important, contains the static files served by your web server.
Index.html -- the index.html file where your react app will inject elements into. I believe this is the only "essential" file.
The other files in this folder will contain logos and manifests if you'd like your webpage to be able to be installed as a mobile app seamlessly. The manifest.json file holds the information about what the app icon and such will look like.
Favicon is the tiny logo you see in your tab title
robots.txt will have the instructions for bots visiting your website. Read about it here if you'd like (https://www.cloudflare.com/learning/bots/what-is-robots.txt/)
src -- very important, will contain your source code. If you want your app to do anything at all, it wouldn't be very wise to delete this folder. If you want to rename this to something else, you can, but you'd have to mess with the webpack configurations. So, not worth the little extra effort. However, you may alter the folder contents.
Unless you want performance monitoring and are writing tests for your app, you can safely delete the test file and the report webvitals stuff. You can make your test files somewhere else too, it doesn't matter if it's here. Just make sure you configure your testing library so that it looks for the correct files.
The rest of the files in this folder can be modified all you like, but try not to touch index.js unless you want to go mess with the webpack configs to change the entry point. Webpack looks for index.js as an entry point to build its dependency tree during compilation.
.gitignore -- this is the files/folders you can tell git to ignore when tracking your folder. A usual candidate for this file is the node_modules folder.
package.json/package.json -- very important, don't directly mess with these unless you know what you're doing. This contains the info about npm packages which your require to run your project properly. A situation where you will need to mess with package.json is when you want to add some custom npm scripts, which is often quite useful.
README.md -- just your readme file which is used to display info about the project on your github repo for example. You can delete it, but just put something on there containing basic info about the repo/ what it does.
I'm facing the problem to import a min.js file into a nodejs project. I don't have an HTML file (I'm using express.js for backend activities) therefore I cannot import it in the normal way.
You can ask why I need a minified file inside the project. I forked another npm package and I made some edit to it. I don't want to publish it on npm since I need to test it first but I don't want to copy and paste the entire project inside others.
A min.js is perfect since it can places in many projects without effort.
Is it then possible? Do you know best practices regarding this problem?
EDIT:
The minified file was useful in a DOM context but I don't need to have it. It would be really handy if I could use it also in Nodejs.
What I need it's to import an edited npm package in other projects such that I don't need to copy and paste it every time in each project folder.
Other ways using package.json would be great.
Thank you in advance!
I've downloaded this Phaser/MatterJS example from Codesandbox (->File ->Export to ZIP).
Running it locally returns this error:
Uncaught SyntaxError: Cannot use import statement outside a module - index.js:1
How to fix this?
What I tried so far:
I've installed all dependencies
Updated to latest NodeJS
Running it with a local server
Just as you have seen yourself the javascript that is written in the files is not something that the browsers understand out of the box, and so errors were thrown your way.
To send js that browsers understand, you need to use a tool like webpack, parcel. already in the project you shared parcel is used.
You have to do the following:
install the dependecies of the probject
in the root dir of the project run npm run start
parcel will bundle the files and then open an html page with the results
unfortunately when i tried this parcel did not work for me, there were errors related to JSON loading, however i have managed to get the game to work, by running npm run build, this will output for you the build files in a folder called dist.
Go to the dist folder, and start a local server there and visit the file it should work, however again for me it did not work. but i noticed that its due to parcel not getting the correct relative path of the bundled js file.
To solve that, open the index.html file in the dist folder, you will find that there is one script there
<script src="/js.d8530414.js"></script>
I had to change that to
<script src="./js.d8530414.js"></script> // because this was the correct file in my file system
After that visit the html file in the dist folder, and the game works fine.
Obviously this way of working is not conveninent, since for each change you want to see you have to build the project again using npm run build. You need to solve the problem of npm run start not working, it could be that this problem never occurs to you if you are on different os than mine. If it happens then i suggest updating parcel and trying again, if problem still persists, then you can look here since issue seems related to phaser wanting the json file as json, while parcel compiling it to javascript object.
index.html:
<script type = "module" src = "./js/index.js">
You have to tell the browser that this js file is a module, then it will change some things on the backside for you to use this. This article is very helpful for getting started with modules.
I've followed the instructions in this URL (https://github.com/react-component/calendar) to install a component app in my dependencies. I have succesfully installed it, imported it and it is visible and usable in my web app.
npm install rc-calendar
import Calendar from 'rc-calendar';
<Calendar />
However, I can't seem to edit it or find a 'Calendar.js' file to make changes to it? I'm able to see it in my package.json file but not more than that
You'll find the source files in your node_modules folder in your project. But I would not edit them there. If you want to use that plugin as a starting point and edit it from there, I recommend downloading the source files from the github repo and including it in your project as a regular .js file / regular component. Then you can edit from there. It looks like that plugin has many files that are written in typescript.
TL;DR You can, but you shouldn't.
When you use npm it's supposed that you don't change those packages, what you can do is create your own version. If you want to find the source code, some packages come with it, you'll find it in: <project folder>/node_modules/rc-calendar.
The typical convention is to not edit packages installed via npm . However, you can clone the package repo and include it in your project. There, you can do what ever you want.
I am relatively new to using git and GitHub, and I am working on my personal website. I am using the JS plugin Slick, a responsive carousel feature. I downloaded all of the necessary files and stored them within my local repo. The size and content of the Slick zip folder is much larger than the files for my site at the moment, so when syncing with GitHub this makes my project appear as 75% Javascript, whereas the actual website is not.
Am I doing this correctly, storing the files for my JS plugin directly within my repository folder? Or should I be using some other method to implement Slick on my site? Or is this just something I should not be worried about? Thanks
If you're just using one library, manually storing it in your Git repo is fine. You'd have to manually update the files if a new version is released, but that's not a big deal for one library. (And you might not even care about updates to this library).
However if you're using more than one library, I'd highly recommend using Node Package Manager (NPM) and a build tool like Webpack.
Here's an article that introduces these tools (plus a few others): https://medium.com/front-end-hacking/what-are-npm-yarn-babel-and-webpack-and-how-to-properly-use-them-d835a758f987
For using git, you should store your dependencies in a folder that is in your .gitignore. If you install browserify or another similar tool like webpack, you can use the npm package manager to create a dependency list file with npm init that allows for easy package installation with npm install by anyone. You can install packages slick with npm install --saveslick-carousel and use them with require() in your main js file. Then, take your js file and run browserify jsfile.js -o outputfile.js and it will package your js and your dependencies together to be used by the browser
When uploading to your git repo, add a .gitignore like this one for Node. This prevents your dependencies from being uploaded to the repo and instead when someone wants to run your project, they must run npm install to get all the dependencies.
Browserify gives an output JS file you add to your web server, the name of this file should be put in your .gitignore as well. Your code is stored in the js file you pass to browserify and other people can still access it without the output file, but they need to run the browserify command to package your code.