Wie installiere ich babel und benutze ES6 lokal im Browser?

Also, ich bin nach Tutorial ES2015 lernen hier:Wie installiere ich babel und benutze ES6 lokal im Browser?

http://k33g.github.io/2015/05/02/ES6.html

Aber ich diese Datei nicht auf diesem Tutorial Basis finden:

node_modules/babel-core/browser.js

Wo ich Browser bekommen kann. js? Denn nachdem ich ausführen:

npm install babel-core

gibt es 2 browser.js in node_modules\babel-core

1 node_modules\babel-core\lib\api\register\browser.js 
2 node_modules\babel-core\lib\api\browser.js

Welche soll ich kopieren?

Quelle

2015-11-11 sekti92

Seit babel 6.2.0 browser.js wurde entfernt.

Nach Babel documentation, haben Sie zwei Möglichkeiten:

1. Verwenden Sie babel-standalone:

Es ist eine Standalone-Version von Babel für die Verwendung in nicht-Node.js Umgebungen, einschließlich Browsern. Es ist ein Ersatz von babel-browser und wird in der offiziellen Babel repl

2. Bundle Ihre eigene Datei verwendet:

ein Bündler verwenden wie browserify/webpack und erfordern direkt babel-core npm Modul und stellen Sie sicher, richtig zu konfigurieren browserify oder webpack, um Fehler aufgrund von reinen Knotenabhängigkeiten und so weiter zu vermeiden.

Beispiel config webpack (I links nur die eine spezifisch):

{ 
    ... 
    module: { 
     loaders: [ 
     ... 
     { 
      loader: 'json-loader', 
      test: /\.json$/ 
     } 
     ] 
    }, 
    node: { 
     fs: 'empty', 
     module: 'empty', 
     net: 'empty' 
    } 
}

Dann im Code:

import {transform} from 'babel-core'; 
import es2015 from 'babel-preset-es2015'; 
import transformRuntime from 'babel-plugin-transform-runtime'; 

... 
transform(
     /* your ES6 code */, 
     { 
      presets: [es2015], 
      plugins: [transformRuntime] 
     } 
    ) 
...

Beachten Sie, dass Plugins und Presets aus dem Code erforderlich sein müssen und kann nicht als String-Option übergeben werden.

Quelle

2015-12-02 01:03:13 JBE

Also ... Webpack könnte Knotenmodule verspotten, das ist cool. Ich dachte, ich würde es nie fertigstellen, bevor Babel eine Anleitung zur Verwendung von Babel 6 in Browsern veröffentlicht. – jiyinyiyong

Sie benötigen browser.js von babel-browser Paket verwenden: https://babeljs.io/docs/usage/browser/

Und das Beste ist eine Zusammenstellung auf der Serverseite zu verwenden.

Quelle

2015-11-11 10:03:44

gibt es keine 'babel-browser' innen' node_modules/babel-core/'man – sekti92

Sie installieren das Paket:' npm installieren babel-Browser --save' –

babel- Browser 6.1.19 scheint nicht kompatibel mit babel 6.2.0 – JBE

In-Browser transpiling wurde von Babel 6 entfernt worden ist, jedoch Daniel15 hat einen eigenständigen Build für den Einsatz in "Nicht-Node.js Umgebungen, einschließlich Browser" hier erstellt:

https://github.com/Daniel15/babel-standalone

Alles, was Sie brauchen, um Fügen Sie diese Referenz zu Ihrer Seite hinzu: <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>

Und dann stellen Sie sicher, dass Sie das Attribut script type="text/babel" in Ihren Referenzen zu anderen Skriptdateien verwenden.

Quelle

2016-01-28 13:47:30

ist diese Unterstützung Export und Import-Funktion? Vor kurzem benutze ich die Import- und Exportfunktion mit gulp + babelify + browserify + vinyl-source-stream – sekti92

Ein Beispiel für die async/erwarten Sie mit Babel Standalone!

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<h1>Standalone Async/Await Example</h1> 
 
<!-- Load Babel --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script> 
 
<script type="text/babel" data-presets="es2017, stage-3" data-plugins="syntax-async-functions"> 
 
/* Output of Babel object */ 
 
console.log('Babel =', Babel); 
 

 
var users = { '123' : { name : 'Joe Montana'} }; 
 
process(); 
 
async function process() 
 
{ 
 
\t var id = await getId(); \t 
 
\t console.log("User ID: "+id); 
 
\t 
 
\t var name = await getUserName(id); \t 
 
\t console.log("User Name: "+name); 
 
} 
 
function getId() 
 
{ 
 
\t return new Promise((resolve, reject) => { 
 
\t \t setTimeout(() => { console.log('calling'); resolve("123"); }, 2000); 
 
\t }); 
 
} 
 
function getUserName(id) 
 
{ 
 
\t return new Promise((resolve, reject) => { 
 
\t \t setTimeout(() => { console.log('requesting user name with id: '+id); resolve(users[id].name); }, 3000); 
 
\t }); 
 
} 
 
</script> 
 
</body> 
 
</html>

Quelle

2016-09-27 18:41:13 funcoding

Wie installiere ich babel und benutze ES6 lokal im Browser?

Antwort

Verwandte Themen