如何在浏览器上本地安装babel并使用ES6? [英] How to install babel and using ES6 locally on Browser?

问题描述

因此，我正在按照以下教程在此处学习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

我应该复制哪个?

解决方案

由于babel 6.2.0 browser.js已被删除.

在 Babel文档之后，您有两个选择:

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

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

So, I am following tutorial to learn ES2015 on here:

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:

npm install babel-core

there are 2 browser.js in 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?

解决方案

Since babel 6.2.0 browser.js has been removed.

Following Babel documentation, you have two options:

1. Use babel-standalone:

It is a standalone build of Babel for use in non-Node.js environments, including browsers. It is a replacement of babel-browser and is used in the official Babel repl

2. Bundle your own file:

Use a bundler like browserify/webpack and require directly babel-core npm module and make sure to configure correctly browserify or webpack to avoid error due to pure node dependencies and so on.

Example of config using webpack (I left only the one specific):

{
    ...
    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.

这篇关于如何在浏览器上本地安装babel并使用ES6?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！