Question

所以，我正在按照教程学习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

我应该复制哪一个？

Answer 1

浏览器中的浏览器已从Babel 6中删除，但Daniel15创建了一个独立的版本，用于非Node.js环境，包括浏览器和＃34;这里：

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"属性。

Answer 2

自babel 6.2.0 browser.js已被删除。

关注Babel documentation，您有两种选择：

<强> 1。使用babel-standalone：

它是Babel的独立版本，用于非Node.js环境，包括浏览器。它是babel-browser的替代品，用于官方Babel repl

<强> 2。捆绑您自己的文件：

使用像browserify / webpack这样的捆绑器并直接要求babel-core npm模块，并确保正确配置browserify或webpack以避免由于纯节点依赖性等导致的错误。

使用webpack的配置示例（我只留下了一个特定的）：

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

请注意，代码中需要插件和预设，不能作为字符串选项传递。

Answer 3

使用babel standalone的async / await示例！

＆＃13;

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

＆＃13;

Answer 4

您需要使用browser.js包中的babel-browser：https://babeljs.io/docs/usage/browser/

最重要的是在服务器端使用编译。

Answer 5

尝试

blur

如何在浏览器上本地安装babel并使用ES6？

5 个答案: