I'm using Twig as my templating system on server side and also want to use it client side (to use the same templates).
I'm also using Bower and tried this command to get Twig.js:
bower install twig.js
But that didn't install all folders as seen here https://github.com/twigjs/twig.js. Then I tried to install other recent branches and commits but still 2 folders were missing at least (bin & src).
After that, I tried cloning the project using Git and it worked because it really got all listed files and folders.
But then when I include twig.js in my HTML file throws this error in the Chrome console log:
twig.js:13 Uncaught ReferenceError: require is not defined
My best guess is that function "require" belongs to Node.js (right?) and there must be some kind of compilation to get Twig.js for the browser (right???).
So, I don't know what is next... How can I get the Twig.js for the browser? (Meanwhile I'm going to get Twig.js from a CDN).
Please help me.
I don't know which version of Twig.js you were using, since the question was posted almost 2 years ago, but probably something 0.9.x or higher. Since that version the maintainers did not commit any JS files compiled for web usage in the root of the project.
So yes, the JS files inside the src/ folder are NodeJS files and you have 'to do something' before you can use them in your browser. The library is using Webpack to build a browser compatible version.
You should run npm install in the root of the GitHub clone to set up the project and then run npm run build in order to build a web version. Check for twig.js in the root after that.
Using a CDN version is also a good option. But because the builds were left out since version 0.9.0 there is no newer version of Twig.js on cdnjs than 0.8.9 while the library is currently on version 1.12.0
Or run npm install twig --save, the compiled files are at:
node_modules/twig/twig.js and
node_modules/twig/twig.min.js
You have to install RequireJS to use require("twig");. Install that first and then run.
Related
Hello I am currently stuck with a task that is given to me. The problem is that I am unable to install dependencies when running npm install which means that I am unable to run the website locally which is my main goal
There are many versions of this question in the internet but I am not really sure what the main cause of this therefore the title of this question
you can view my error logs here
https://www.codepile.net/pile/4qL4NOq0
I have also tried some solutions that I have seen on the internet such as:
reinstalling node
deleting node_modules and package-lock.json and re-npm install (this is when I have installed the node_modules but still unable to run the website locally)
installing grpc globally
The version of grpc that you are installing (1.23.3) does not support the version of Node.js that you are using (16). You will need to use a newer version of grpc (the latest is 1.24.11) or an older version of Node to get that to work.
Please note that the grpc package has been deprecated in favor of the #grpc/grpc-js package. It is recommended that you use that one instead if possible.
I'm trying to use an API via it's helpfully developed JS SDK. So the SDK instructions on the GitHub page are to npm install. I'm wondering though, does this imply I have to have Node.js because the SDK has been written specifically for it, or if I just have basic vanilla JS/jQuery, can I just.... Copy the source code from GitHub into my scripts or use it some other way?
It means that the project is using npm to handle dependencies. It has a package.json file that stores what those dependencies are, and npm install will download them into a folder usually called 'node_modules.'
It's dependency management. It doesn't mean it's written for node, but that it uses node to download external dependencies.
I'm completely new to frontend web dev with a very basic question. Once I npm install something, how do I actually use it? For example, I just did npm install bootstrap, and I would now like to be able to use the CSS and Javascript that it downloaded. I'm sure I shouldn't have to dig through the directories to find some entry point... so how do I now use bootstrap in my webpage?
Most modules on NPM are used in Node.js, for the server (backend). Node.js has a built-in function require('your-module') to make use of the module. This function is not present on the frontend in the browser. However, there are tools like browserify or webpack and probably others to make the NPM modules and the require function work in the frontend.
If you're just starting out I suggest you take a look at Bower first. With Bower (installed with NPM though) you can pull in all your frontend libraries like jQuery, Bootstrap, etc. to your project folder and you can point your script tags in your HTML to the bower_components/ directory, e.g. <script src="/bower_components/jquery/jquery.min.js"></script>. You can save a list of all libraries used with a version number in a json file called bower.json in the root of your project folder.
Based on this file you can pull in or update all the libraries listed with the use of the command line.
As a really general rule, npm is used for assets your node app will use on the server, while bower (and others) are the equivalent for dependencies that you want to use on the client.
That said, the use is basically the same.
npm (and bower) install the files into your project directory in a standard location. All you really have to do is make sure that location is accessible via a web request (typically, node_modules is not; which is why bower came about), and then embed link and script tags as appropriate in your html:
<script src='/node_modules/bootstrap/js/bootstrap.min.js'></script>
I just installed Node with npm to use it for frontend dependency management. I know there is also bower but why would I need another package manager that is built on top of another?
When installing a package, npm seems to always load the full source of the js library into the node_modules directory. Just as it's downloading the complete github repository.
How do I install only the minifed (distribution) version of a javascript lib with npm?
There is no standard way to ask npm to get the minified version of a library. Some developers will produce packages that contain both minified and unminified versions (that's what I've done for one of my projects, which is web-only but can be installed through npm) or will create a package that contains an unminified version and another package that contains the minified version. This is done on a case by case basis, varies from package to package, and has to be determined by looking at a project's documentation.
If a developer has not cared to provide a minified code base through npm then you'll have to perform the minification yourself or get the "official" minified code through some other means.
You can use packages like node-prune and ModClean to clean up the unwanted dependencies.
Read this post for more details.
I am using cheerio module for web scraping . It require htmlparser2 module , after installing htmlparser2. it gives following error-
Error: Cannot find module 'entities/lib/decode_codepoint.js'
Use this in your terminal:
npm install grunt-contrib-jshint --save-dev
Seen here:
https://www.npmjs.com/package/grunt-contrib-jshint
Below is applicable to Windows environment only, not Linux.
I received the same error when I tried to build jquery from source on Windows. It turns out that jsdom and/or grunt-contrib-jshint (both of which depend on htmlparser2) require gyp and for gyp to work you need a c++ compiler and python. I thought that I had them but turned out, that python need to be version 2.x not version 3.x. If it is 3.x it gives you a proper error on the first run (that I missed) and on subsequent runs you are getting the error in the question above which makes you wonder what's going on.
So I uninstalled python 3.x, installed python 2.x (don't forget make sure that python.exe is in your path), then deleted the node_modules folder in the project root and ran the build again.
This time around it worked. I'm not sure if this solves the OP question, but I hope it helps someone.