node.js 如何在浏览器上本地安装 babel 和使用 ES6？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33643967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to install babel and using ES6 locally on Browser?
提问by sekti92
So, I am following tutorial to learn ES2015 on here:
所以，我正在按照教程在这里学习 ES2015：
http://k33g.github.io/2015/05/02/ES6.html
http://k33g.github.io/2015/05/02/ES6.html
But, I don't find this file based on that tutorial:
但是，我没有根据该教程找到此文件：
node_modules/babel-core/browser.js
Where can I get browser.js? Because after I execute:
我在哪里可以获得 browser.js？因为在我执行之后：
npm install babel-core
there are 2 browser.js in node_modules\babel-core
有 2个 browser.js node_modules\babel-core
1 node_modules\babel-core\lib\api\register\browser.js
2 node_modules\babel-core\lib\api\browser.js
Which one should I copy?
我应该复制哪一个？
采纳答案by JBE
Since babel6.2.0 browser.jshas been removed.
自babel6.2.0browser.js起已被移除。
Following Babel documentation, you have two options:
按照Babel 文档，您有两个选择：
1. Use babel-standalone:
1. 使用babel-standalone：
It is a standalone build of Babel for use in non-Node.js environments, including browsers. It is a replacement of babel-browserand is used in the official Babel repl
它是 Babel 的独立构建，用于非 Node.js 环境，包括浏览器。它是babel-browser官方 Babel repl的替代品并用于
2. Bundle your own file:
2. 捆绑自己的文件：
Use a bundler like browserify/webpack and require directly babel-corenpm module and make sure to configure correctly browserify or webpack to avoid error due to pure node dependencies and so on.
使用像 browserify/webpack 这样的 bundler 并直接 require babel-corenpm module 并确保正确配置 browserify 或 webpack 以避免由于纯节点依赖等导致的错误。
Example of config using webpack (I left only the one specific):
使用 webpack 的配置示例（我只留下了一个特定的）：
{
...
module: {
loaders: [
...
{
loader: 'json-loader',
test: /\.json$/
}
]
},
node: {
fs: 'empty',
module: 'empty',
net: 'empty'
}
}
Then in your 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]
}
)
...
Note that plugins and presets need to be required from the code and can't be passed as string option.
请注意，代码中需要插件和预设，并且不能作为字符串选项传递。
回答by Mark Gibaud
In-browser transpiling has been removed from Babel 6, however Daniel15 has created a standalone build for use in "non-Node.js environments including browsers" here:
浏览器内转译已从 Babel 6 中删除，但 Daniel15 在这里创建了一个独立构建，用于“包括浏览器在内的非 Node.js 环境”：
https://github.com/Daniel15/babel-standalone
https://github.com/Daniel15/babel-standalone
All you need to do is add this reference to your page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
您需要做的就是将此引用添加到您的页面：
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
And then make sure you're using the script type="text/babel"attribute in your references to other script files.
然后确保您在script type="text/babel"对其他脚本文件的引用中使用了该属性。
UPDATE: More info can now be found here: babeljs.io/docs/en/next/babel-standalone.html
更新：现在可以在这里找到更多信息：babeljs.io/docs/en/next/babel-standalone.html
回答by funcoding
An example of the async/await using babel standalone!
使用 babel Standalone 的 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>回答by Juneho Nam
try this
尝试这个
<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>
回答by stdob--
You need use browser.jsfrom babel-browserpackage: https://babeljs.io/docs/usage/browser/
您需要browser.js从babel-browser包中使用：https: //babeljs.io/docs/usage/browser/
And best of all to use a compilation on the server side.
最重要的是在服务器端使用编译。
