web-dev-qa-db-ja.com

ブラウザでローカルにES6を使用してbabelをインストールする方法は？

だから、私はここでES2015を学ぶためのチュートリアルに従っています：

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

しかし、私はそのチュートリアルに基づいてこのファイルを見つけません：

node_modules/babel-core/browser.js

Browser.jsはどこで入手できますか？私が実行した後：

npm install babel-core

node_modules\babel-coreには2つのbrowser.jsがあります

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

どれをコピーすればよいですか？

node.jsbabeljs
14
sekti92

babel 6.2.0 browser.jsが削除されたため。

Babel documentation の後に、2つのオプションがあります。

1。 babel-standalone：を使用します

これは、ブラウザを含むNode.js以外の環境で使用するためのBabelのスタンドアロンビルドです。 babel-browserの代替であり、公式のBabelで使用されています repl

2。独自のファイルをバンドル：

Browserify/webpackなどのバンドラーを使用し、babel-core npmモジュールを直接必要とし、純粋なノードの依存関係などによるエラーを回避するために、適切にbrowserifyまたはwebpackを構成するようにしてください。

Webpackを使用した設定の例（特定の1つだけを残しました）：

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

次に、コードで：

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

プラグインとプリセットはコードから要求される必要があり、文字列オプションとして渡すことができないことに注意してください。

8
JBE

ブラウザ内のトランスパイルはBabel 6から削除されましたが、Daniel15はここで「ブラウザを含むNode.js以外の環境」で使用するためのスタンドアロンビルドを作成しました。

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

必要なことは、この参照をページに追加することです：<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>

そして、他のスクリプトファイルへの参照でscript type="text/babel"属性を使用していることを確認してください。

8
Mark Gibaud

Babelスタンドアロンを使用したasync/awaitの例！

<!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>
7
funcoding

browser.jsパッケージのbabel-browserを使用する必要があります。 https://babeljs.io/docs/usage/browser/

そして何よりも、サーバー側でコンパイルを使用することが最善です。

1
stdob--

これを試して

<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