I am trying to use this package here without using any bundlers(webpack/browserify). I have already downloaded this package to my project by running npm install --save mtgsdk. To use this package in Javascript, I would call const mtg = require('mtgsdk'). If I don't want to install/configure webpack, how would I load this package into my project?
Note that I am using Gulp and NPM. My project is an AngularJS project so I am not using node.
Package I am trying to load: https://github.com/MagicTheGathering/mtg-sdk-javascript
Quick answer
You can't without using any bundlers like webpack or browserify.
Try to use requireJs however It depends on the modules:
RequireJS does not contain code that will magically make a npm-installed module work in the browser. It ultimately depends on how the modules are structured.
To know more about this please check the last section of this answer by #Louis
MTG API
The Gathering SDK Javascript implementation: It is a wrapper around the MTG API of magicthegathering.io
I don't really see the point of using a npm module if you aren't going to use node in your project.
As mentioned before the module is just a wrapper for the api so you can still do an http request usign the api endpoint:
https://api.magicthegathering.io/<version>/<resource>
Example: client.js
This call will return a maximum of 100 cards
// Get All Cards
const api = 'https://api.magicthegathering.io/v1';
fetch(`${api}/cards`).then(res => res.json())
.then(json => console.log(json));
Output
{ cards: [...] }
To know more about the api please read the api-docs
You don't need Webpack to use require. Once you've run npm install, the package has been downloaded to the node_modules folder of your project. You can require the package perfectly fine from any script within your project folder. Node itself will handle finding the package in node_modules when you call require.
Related
I am working on a VueJS web app. One of the modules it uses is a wrapper for a javascript library installed through npm and packaged to integrate into vuejs. It does not quite fit our needs, we need to add some functionality to it, so I want to fork it and edit it.
The repo has two folders: src and dist.
As far as I understand, src is the actual src code while dist is a minified version for distribution. Questions:
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
Do components installed through npm use the /src/ version or the /dist/ one?
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
Thank you.
Based on your questions, I would suggest you get a bit more familiar into your stack and how to actually build your appication.
Generally speaking the /dist folder contains automatically generated files, which may be uploaded to a webserver of your choice. Since you are using VueJS, you should be able to generate these files by running npm run build.
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
As I already mentioned, these files are automatically generated by running npm run build. Therefore everytime you run this command, everything in /dist, will be automatically updated.
Do components installed through npm use the /src/ version or the /dist/ one?
Your working directory is always /src. Dependencies can be used like in any other application (this example uses Axios, which is a http client):
import axios from 'axios';
const httpClient = axios.create({ baseURL: 'https://api.something.com' });
httpClient.get(/* ... */);
If you are a beginner and are not 100% sure about how to use depencencies, I highly encourage you to read this article: An Absolute Beginner's Guide to Using npm
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
You do not have to delete anything in /dist. Simply running npm run build automatically will add the latest changes.
Please keep in mind that running npm run build is only relevant for your production environment. For your development environment you always want to use a dev server, which can be started with npm run serve.
I am trying to implement elasticsearch.js in my project and when I added:
var elasticsearch = require('elasticsearch');
It broke my project and said require is not defined. I did research and saw that I would have to use a library called require.js within my project but that is changing my whole project structure just for one script.
I wanted to see if anybody knows how to call an instance without using require:
var elasticsearch = require('elasticsearch');
var client = new elasticsearch.Client();
You seem to be following the instructions for using elasticsearch in a node project or using a bundling system that supports CJS modules (like browserify or webpack). If you want a script that's for a browser-only project, see the Browser Builds page.
Note that at this time, they have this note:
These versions of the client are currently experimental.
You're using a version that should be used in a node project or through a module loader/bundler. The require keyword is node specific, the browser has no idea what to do with it. Require.js would help, you can also install Rollup or Webpack which would bundle the CJS (require) dependencies and your code into one file.
Or to be simple just go to https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/browser-builds.html as Jacob said
I'm trying to build an application that have to run on Windows(PC), Android and iOS.
For this, I will use Electron (for Windows) and React Native (for mobile plateforms). Both will be built with React and Redux. This way, I will be able to implement the logic in Redux reducers and middlewares and use them in both projects.
From now, I have done a POC for the Electron app using webpack. The reducers are currently directly in the app code. I want to extract the Redux relative code in a seperate package to allow me using it in a the React Native project.
I can make an npm package for my Redux module containing the reducers and the middlwares but this way, when I will compile my application, webpack will not compile my seperate package, it will use the precompiled version.
So What I want is to be able to make a separate package but still compile it at application compile time (because it is still in developpement and the dev is very closely related to main application dev).
Do I have to do it only with npm or with webpack as well ?
I'm pretty new to the Javascript dev stack.
I think you have different ways to handle that problem.
You can use NPM package. But in code of package, you will store not only original source code, but compiled code too. I mean before publish that package, you'll need to compile it in normal ES5 code.
I think you can use submodule system provided by Git. You should have separate repository with common code of your reducers. And in each project (Electron, RN, etc.), you will have a directory with git submodule. Webpack should compile code in that directory normally without any problems.
UPD:
About submodules you can read nice article here: https://git-scm.com/book/en/v2/Git-Tools-Submodules#Starting-with-Submodules
In few words, in project it will looks like:
cd yourProjectFolder
git submodule add https://github.com/TalAter/awesome-service-workers submoduleDirectoryName
It will clone repository to your project, and create .gitmodules file. Code from submodule will not exists in current project repository. In remote repository it will contain only link to submodule, but on your machine, you will have full code and you will be able to compile it.
I'm sorry if this doesn't count as a "Programming Question" but I found it relevant since this will make me able to do programming in the Podio API.
My question/problem is that I can't figure out the correct way to set up the Podio JavaScript SDK/API scripts. I followed "http://podio.github.io/podio-js/" but it really only explains so much.. Mostly about Node and that I need to use Node for it, but isn't there another way like simple Ajax calls?
Reason being, I don't have the possibility of running a Node server in my server background, just to make API calls, it may be effective but it sounds kind of stupid when so many other API's out there doesn't require this.
Thoughts?
podio-js is a Podio JavaScript SDK for node and the browser.
... which means you don't necessary need Node.js. To use NPM module in the browser you'll need a bundler, like Webpack:
npm install podio-js --save
npm install webpack --save-dev
Then in your app.js:
var podio = require('podio-js');
// follow the tutorial
To bundle the app:
./node_modules/.bin/webpack app.js app.bundle.js
Then include the bundle in your HTML via script tag and voilà:
<script src="app.bundle.js"></script>
I've used JetBrains WebStorm to create a Node.js Express App. I used npm (via File->Settings->Node.js and NPM) to install a package called validator which is used for string validation.
The package was installed under node_modules, which is fine. If I do var validator = require('validator'); in my server code, I can use the validation functions successfully.
The problem is that I would also like to use validator in client JavaScript. I can include the script like this:
<script src="/javascripts/xss-filters.min.js"></script>
But that means I have to copy xss-filters.min.js from the node_modules folder into the public javascripts folder. Then, if I ever update the package with npm, the files will be out of sync.
Is there some way to reference node_modules from my view, or to create some sort of linked file or file reference or something? I'd rather not have to maintain this manually.
you should consider using browserify, which allows you to require modules in the browser by building all the dependencies. so basically you code like you would do in server side http://browserify.org
You can done it by using another node.js module, called node-browserify
how to use node.js module system on the clientside
You can try to use bower, or yeoman.
bower - will simplify the process to include js libs.
yeoman - will help you to build projects with the the libraries that you need.