In the demo html page downloaded from the 'Trying Out React' page, they use the following CDN to bring in babel.js:
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
Seems like React knows to automatically use this library.
But if I've installed babel using npm install babel-cli Where can I find this 'babel.js' file?
<script src="node_modules/babel-cli/[babel.js?]"></script>
Am I thinking about this wrong?
It sounds like you now need to compile the script(s) you're using which require Babel, as described in the Usage guide: https://babeljs.io/docs/usage/cli/
You may need to use the "--out-file" to reference later in your HTML file.
Related
I'm trying jQuery for the first time, I know this library is becoming more and more unused, but I need it to work with it on a project.
So I initialized a jQuery project with npm install jquery, so node modules and package-lock.json were created. I wonder how should I target library files on the index.html file, I mean maybe it should be something like this <script src="./node_modules/jquery/dist/jquery.min.js"></script>. Also how should I use libraries on .js files.
I don't know if I should point file by file or how should I use library files. Maybe someone could guide me with examples or docs on how to start using a jQuery libraries on a project.
In your relevant javascript files (where you need to use jQuery) you should be doing
import $ from "jquery";
at the top. Also install and configure babel for compiling as it will
support ES6/ES2015 modules even if browsers do not yet support.
It seems to be a lame question, but I cannot figure it out. How to import popper.js which comes together with Bootstrap 4 beta?
I use Bower, and I've installed Bootstrap 4 beta. Now in the bower_components folder, there is the popper.js directory, which contains a few sub-folders. The problem is there is no dist folder and the popper.min.js file.
Bootstrap 4 guide links to CDN: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js.
How to import popper.js without CDN? Where to find the popper.min.js file?
EDIT: Even if I download a zip file from the popper.js website, it contains the same files as I've downloaded from Bower.
I ran into the same problem.
I downloaded the 'popper.min.js' file from the CDN on the bootstrap website.
See here: https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/cjs/popper.min.js
Easier than compiling the project.
Important: You must include popper after jquery but BEFORE bootstrap.
The official way to install Popper.js is trough npm, Yarn or NuGet.
Use either one of the following commands :
npm i popper.js
yarn add popper.js
PM> Install-Package popper.js
Everything is described in the library readme.
Regarding the "downloads the zip", the zip clearly states that it contains the source code of the library.
Edit:
Starting from version 1.12.0, Popper.js is available as Bower dependency.
This installation method is going to be supported only for the 1.x version of Popper.js and will be removed in 2.x.
You should migrate your dependencies management to a modern system like npm or Yarn, as Bower suggests as well.
Ways to get popper.js: Package, CDN, and Local file
The best way depends on whether you have a project with a package manager like npm.
Package manager
If you're using a package manager, use it to get popper.js like this:
npm install popper.js --save
CDN
For a prototype or playground environment (like http://codepen.io) or may just want a url to a CDN file:
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js
note: Bootstrap 4 requires the versions under the umd path (more info on popper/bs4).
Local file
Just save one of the CDN files to use locally. For example, paste one of these URLs in a browser, then Save As... to get a local copy.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js
I had the same problem. Tried different approches, but this one worked for me.
Read the instruction from http://getbootstrap.com/.
Copy the CDN paths of Javascripts (Popper, jQuery and Bootstrap) in same manner (it is important) as given.
<head>
//Path to jQuery
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
////Path to Popper - it is for dropsdowns etc in bootstrap
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
//Path to bootsrap
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
I really don't understand why Javascript world trying to do thing more complicated. Why not just download and include in html? Trying to have something like Maven in Java? But we have to manually include it in html anyway? So, what is the point? Maybe someday I will understand but not now.
This is how I can get it
download & install NodeJs
run "npm install popper.js --save"
then I get this message
popper.js#1.12.7
added 1 package in 1.215s
then where is "add package" ? very informative , right? I found it in my C:\Users\surasin\node_modules\popper.js\dist
Hope this help
IN bootstrap 4 you need to add popper js for tooltip, I also don`t understand why bootstrap 4 includes external popper.js, It means bootstrap makes more complicated instead of easy when upgrading to the latest versions.
You can import popper js before bootstrap on angular or a simple html, Angular import would be like this
npm install popper.js --save
then go to
.angular-cli.json and change the order like below.
"scripts": [
"../node_modules/jquery/dist/jquery.slim.min.js",
"../node_modules/tether/dist/js/tether.min.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
you can also use CDN direct call popper js into your any project.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js
add popper**.js** as dependency instead of popper (only): see the difference in bold.
yarn add popper.js , instead of
yarn add popper
it makes the difference.
and include the script according your needs:
as html or
the library access as a dependency in SPA applications like react or angular
first install propperJs from by yarn
yarn add popper.js
then you can import it like this
import Popper from "popper.js";
I deleted any existing popper directories, then ran
npm install --save popper.js angular-popper
It turns out that Popper.js doesn't provide compiled files on its GitHub repository. Therefore, one has to compile the project on his/her own or download compiled files from CDNs. It cannot be automatically imported.
You can download and import all of Bootstrap, and Popper, with a single command using Fetch Injection:
fetchInject([
'https://npmcdn.com/bootstrap#4.0.0-alpha.5/dist/js/bootstrap.min.js',
'https://cdn.jsdelivr.net/popper.js/1.0.0-beta.3/popper.min.js'
], fetchInject([
'https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.js',
'https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js'
]));
Add CSS files if you need those too. Adjust versions and external sources to meet your needs and consider using sub-resource integrity checking if you're not hosting the files on your own domain or don't trust the source.
Install popper.js with spesific version number like this:
bower install popper.js#^1.16.0
Now u can find dist folder and popper.min.js file.
I am following this tutorial: Headless Drupal with React. I bet the tutorial itself is not related with my questions. In the tutorial it shows two import of React and ReactDOM from CDN straight in the .html file.
My question is how can I have package manager (npm or yarn) to download these file to be imported (with RequireJS) to browser, like it is directly taken from CDN? I installed those with this command yarn add react react-dom.
My first guess, is that I need to import the two files, react.js
and react-dom.js with RequireJS. So, what I have right now in my index.html is this:
<!doctype html>
<html>
<head>
<script data-main="js/main" src="node_modules/requirejs/require.js"></script>
</head>
<body>
</body>
</html>
And in my js/main.js I have these simple codes:
require(["node_modules/react-dom/cjs/react-dom.development.js"]);
require(["node_modules/react/cjs/react.development.js"]);
But it returns an odd error:
Uncaught ReferenceError: process is not defined
at react.development.js:12
(anonymous) # react.development.js:12
react-dom.development.js:12 Uncaught ReferenceError: process is not defined
at react-dom.development.js:12
To re-phrase: how can I install React and ReactDOM from package manager and import those files straight into my HTML file?
I don't bother about best-practice at this moment, I would not accept solution like, "just save the .js files straight from the CDN", ... kind of solutions.
"<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>"
Either use the actual CDN, and download locally to server and then have it on included on your web page. Or you can use a package bundler "A bundler, such as webpack or Browserify. It lets you write modular code and bundle it together into small packages to optimize load time." https://webpack.js.org/ http://browserify.org/ The npm module file is different from the CDN and is not configured to work as a CDN. That is my official answer, and from the research I have done I stand behind it 100%. The link to the image you provided also shows an older version of react, 15 so you might have versioning issues as well.
The short answer, you can't. At least from what ReactJS provided out-of-the-box. ReactJS downloaded from currently package manager (Yarn or NPM) need a server to run. At the most basic simple HTTP server like python3 -m http.server works.
Without CDN, there is no simple way to get ReactJS working with just double clicking HTML file.
The tutorial I was following, used jQuery inside typings folder used
/// <reference path="../typings/tsd.d.ts" />
inside app.component but did not work.
Tried import the library in side index.html through CDN, then use
declare var $:any; still not working
Installed jQuery through NPM and it to path inside system.config.ts like the following
paths: {
// paths serve as alias
'npm:': 'node_modules/',
'jquery:': 'node_modules/jquery/dist/jquery.slim.min.js'
},
still no clue
Update:
Now I installed angular via angular-cli. I do not 404 error, but the app still not working. It is supposed to output the keyup in the console
https://plnkr.co/edit/8HW67qLUF3t8zmTigXH6?p=preview
You mentioned you were just using a tutorial, so, not attached to the SystemJS config itself.
If you are using the Angular CLI instead (my personal recommendation), you can do it as follows:
Install jQuery, the actual library
npm install jquery --save
Install jQuery TypeScript autocomplete
npm install #types/jquery --save-dev
Then go to the ./angular-cli.json file at the root of your Angular CLI project folder, and find the scripts: [] property, add this inside it:
"../node_modules/jquery/dist/jquery.min.js"
(or use the slim version if that's your cup of tea, keep the rest of the path as-is)
After that, jQuery will be available for you as a global variable. You can log jQuery.fn.jquery (which brings jQuery's version) to ensure it's working brilliantly.
P.S.
If you want to use Webpack directly, or gulp, we need to see a sample of your config file, or which project seed did you used to create the project (applicable to Webpack and Gulp projects).
Jquery is awesome when you want to just do a simple DOM manipulation, i feel its one of the major drawbacks for Angular, simple DOM accessing in one line would be great. Here ya go. Load Jquery in your index.html file. Also you need to include the definitions file to get the Jquery functions to work inside typescript functions.
<script type="text/javascript" src="/assets/jquery-3.1.1.min.js" async></script>
I have some code I would like to ask questions about on stackoverflow. The code is written in AngularJS with Typescript, and does manipulation and watching of the $location.hash. I now have the code on github at https://github.com/svdoever/AngularJS-bookviewer. Is it possible to have this code, preferably without the compiled Typescript files, up at http://plnkr.co?
I read at https://twitter.com/filearts/status/290961349092208642 that Typescript should be suported on http://plunkr.co.
Edit:
Solution by Bassarat to add a gh-pages branch to the git repository did the job. See comments on his answer.
It isn't supported by plunker. But I tend to use http://typescript.io/ when I need third party lib support (e.g. angularjs). Otherwise I just stick with TypeScript Playground http://www.typescriptlang.org/Playground/
Update
You can use TypeScript anywhere you like using https://github.com/basarat/typescript-script (plunker sample : https://github.com/basarat/typescript-script#plunker)
That said many playgrounds now support TypeScript natively including plunkr : https://github.com/ggoodman/plunker-run-plugin/blob/master/README.md (just put "use typescript"; at the top of your file and add a tsconfig.json file 🌹
You can use TypeScript Compile to transform your TypeScript files into JavaScript.
Reference your TS files like this:
<script type="text/typescript" src="app.ts"></script>
And add these two JS files at the end of the HTML body:
<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.min.js"></script>
<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.compile.js"></script>
Kos Prov created a working TypeScript Plunker here.
Update
You can use SystemJS to load TypeScript files, although you'll need to manually bootstrap Angular.
http://plnkr.co/edit/kFsJ7q?p=preview
Use https://stackblitz.com/ instead, all live examples on angular.io use stackblitz now.
You could use Cloud 9 or Codio
https://c9.io
https://codio.com/
You can clone projects from github.
It is like an IDE and you will get a terminal. It has node installed.
I tested in cloud 9, but codio is similar you can use it too
You can run this command to install typescript
npm install -g typescript
then you can compile your .ts file from the terminal.
lets say that you have a file
hello.ts
you compile it using the following command
tsc hello.ts
If you are facing issues with compiling, please check the directory where your file is at.
http://plnkr.co/edit/NqELPE?p=preview
Here's a simple Hello World app that my colleague wrote that uses Typescript and Angular2
Simply use the Plunker tool for including packages and it works fine:
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime#0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system#0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.25/angular2.dev.js"></script>