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

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.2.0 browser.js 已被删除。

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

1.使用 babel-standalone:

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

<强>2。打包你自己的文件:

使用browserify/webpack之类的bundler直接require babel-core npm模块，确保正确配置browserify或webpack，避免纯 Node 依赖等错误。

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

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