web-dev-qa-db-fra.com

Comment installer babel et utiliser ES6 localement sur le navigateur?

Donc, je suis un tutoriel pour apprendre ES2015 ici:

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

Mais, je ne trouve pas ce fichier basé sur ce tutoriel:

node_modules/babel-core/browser.js

Où puis-je obtenir browser.js? Parce qu'après avoir exécuté:

npm install babel-core

il y a 2 browser.js dans node_modules\babel-core

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

Lequel dois-je copier?

node.jsbabeljs
16
sekti92

Depuis babel 6.2.0 browser.js a été retiré.

Après documentation Babel , vous avez deux options:

1. Utilisation babel-standalone:

Il s'agit d'une version autonome de Babel pour une utilisation dans des environnements non-Node.js, y compris les navigateurs. Il s'agit d'un remplacement de babel-browser et est utilisé dans le Babel officiel repl

2. Regroupez votre propre fichier:

Utilisez un bundler comme browserify/webpack et demandez directement babel-core module npm et assurez-vous de configurer correctement browserify ou webpack pour éviter les erreurs dues aux dépendances de noeud pur et ainsi de suite.

Exemple de configuration utilisant webpack (je n'ai laissé que celui spécifique):

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

Puis dans votre 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]
        }
      )
...

Notez que les plugins et les préréglages doivent être requis dans le code et ne peuvent pas être passés en tant qu'option de chaîne.

9
JBE

Le transpiling dans le navigateur a été supprimé de Babel 6, cependant Daniel15 a créé une version autonome pour une utilisation dans des "environnements non-Node.js, y compris les navigateurs" ici:

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

Il vous suffit d'ajouter cette référence à votre page: <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>

Et puis assurez-vous que vous utilisez le script type="text/babel" attribut dans vos références à d'autres fichiers de script.

MISE À JOUR: Plus d'informations peuvent maintenant être trouvées ici: babeljs.io/docs/en/next/babel-standalone.html

9
Mark Gibaud

Un exemple de l'async/wait utilisant 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()
{
        var id = await getId(); 
        console.log("User ID: "+id);
        
        var name = await getUserName(id);       
        console.log("User Name: "+name);
}
function getId()
{
        return new Promise((resolve, reject) => {
                setTimeout(() => { console.log('calling'); resolve("123"); }, 2000);
        });
}
function getUserName(id)
{
        return new Promise((resolve, reject) => {
                setTimeout(() => { console.log('requesting user name with id: '+id); resolve(users[id].name); }, 3000);
        });
}
</script>
</body>
</html>
8
funcoding

Vous devez utiliser browser.js de babel-browser package: https://babeljs.io/docs/usage/browser/

Et surtout, utiliser une compilation côté serveur.

1
stdob--

essaye ça

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
<script type="text/babel" data-presets="es2015,stage-2">
    const res = await axios.get('https://api.hnpwa.com/v0/news/1.json')
    console.log(res)
</script>
1
Juneho Nam