我有以下代码：

"use strict";

import browserSync from "browser-sync";
import httpProxy from "http-proxy";

let proxy = httpProxy.createProxyServer({});


，我已经通过npm在全球范围内安装了babel-core和babel-cli。关键是当我尝试在终端上使用此文件进行编译时：

babel proxy.js --out-file proxified.js


输出文件被复制而不是编译（我的意思是，它与源文件相同）。

我在这里想念什么？

评论

let更改为var但导入语句仍保留吗？
对于较新版本的react，请使用新的babel模块：stackoverflow.com/a/53927457/6665568。它具有更好的错误消息并支持react的新功能。

#1 楼

Babel是一个转换框架。在6.x之前的版本中，默认情况下启用了某些转换，但是随着本机支持许多ES6功能的Node版本的使用量增加，可配置性变得更加重要。默认情况下，Babel 6.x不执行任何转换。您需要告诉它要执行哪些转换：

npm install babel-preset-env


并运行

babel --presets env proxy.js --out-file proxified.js


或创建一个.babelrc包含

{
    "presets": [
        "env"
    ]
}


并像以前一样运行它的文件。

env是一个预设，基本上说它可以编译所有标准ES *到ES5的行为。如果您使用的是支持某些ES6的Node版本，则可能需要考虑

{
    "presets": [
        ["env", { "targets": { "node": "true" } }],
    ]
}


告诉预设只处理Node版本不支持的内容。如果需要浏览器支持，还可以在目标中包括浏览器版本。

评论

这很有用。他们为什么不把它放在文档中？在全球范围内安装babel-preset是否安全？

–儿童资本
2015年11月12日17:00
@kidcapital文档确实包含此内容，但似乎只是作为旁注。我花了很多时间试图弄清楚如何在重新发布babel 6.0时对其进行正确配置。

–尼克
15年11月15日在21:13
根据PR＃72，此信息的要旨已作为“信息”框添加到“设置”页面中。很小的改进，但是您必须从某个地方开始！谢谢洛根。

–尼克
15年11月16日在1:46
对于配置方面的约定如此之多...开箱即用，Babel什么也不做-仅复制文件？

–alex.p
16年5月11日在21:52
请询问有关您设置的所有信息的新问题，以便有人回答。

–loganfsmyth
17年1月3日，下午2:07

#2 楼

这些答案大多数都是过时的。 @babel/preset-env和"@babel/preset-react是您所需要的（截至2019年7月）。

#3 楼

我因不同的原因遇到了同样的问题：

我尝试加载的代码不在程序包目录下，并且Babel不会默认在程序包目录外进行编译。

我通过移动导入的代码解决了它，但是也许我还可以在Babel配置中使用一些包含语句。

评论

您能详细说明一下吗？我的前端代码也不在“包目录下”，并且工作正常。我的服务器代码包含“导入”，但babel-cli无法解决这些问题。

–菲利普
16-10-26在13:37
嗯，不确定要讲些什么？巴别塔没有转嫁。尝试查看您所有的Babel配置资源…

– w00t
16-10-26在13:50
我要解决的问题是我的服务器文件在多个文件夹中进行了组织：我有servers.js，然后是/ api / ... stuff ...从内存运行时，每个“导入”或“要求”这些文件中的文件正在动态解析。当我从命令行运行babel时，我仅输出一个文件，但无法解析相对导入，因此无法使用该文件来运行服务器...

–菲利普
16-10-26在14:57


#4 楼

首先，请确保您具有以下node modules：

npm i -D webpack babel-core babel-preset-es2015 babel-preset-stage-2 babel-loader

接下来，将其添加到Webpack配置文件（webpack.config.js）中：

// webpack.config.js
...
module  :  {
  loaders  :  [
    {
      test    :  /\.js$/,
      loader  :  'babel',
      exclude :  /node_modules/,
      options :  {
        presets  :  [ 'es2015', 'stage-2' ] // stage-2 if required
      } 
    } 
  ]
}
...


参考文献：


https://gist.github.com/Couto/6c6164c24ae031bff935
https://github.com/babel/babel-loader/ Issues / 214

祝你好运！

#5 楼

从2020, Jan开始：

步骤1：安装Babel presets：

yarn add -D @babel/preset-env @babel/preset-react

步骤2：创建文件：babelrc.js并添加presets：

 module.exports = {
  // ...
  presets: ["@babel/preset-env", "@babel/preset-react"],
  // ...
}


步骤3：-安装babel-loader：

yarn add -D babel-loader

步骤4：-在您的webpack.config.js中添加加载程序配置：

 {
//...
  module: [
    rules: [
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      loader: require.resolve('babel-loader')
    ]
  ]
//...
}


祝你好运...

#6 楼

npm install --save-dev babel-preset-node5

npm install --save-dev babel-preset-react


...然后创建具有以下预设的.babelrc：

{
  "presets": [
    "node5",
    "react"
  ]
}


...为我解决了一个非常相似的问题， babel 3.8.6和节点v5.10.1

https://www.npmjs.com/package/babel-preset-node5https://www.npmjs.com/package/babel-preset-react

#7 楼

相同的错误，不同的原因：

以前曾经进行过编译，然后突然停止了工作，只是按原样复制了文件。 Windows决定在文件名后附加.babelrc。现在，.txt无法被babel识别。删除后缀.babelrc.txt可以解决该问题。

#8 楼

修复您的.babelrc 

{
  "presets": [
    "react",
    "ES2015"
  ]
}


#9 楼

在2018年：

如果尚未安装以下软件包：

npm install babel-loader babel-preset-react


webpack.config.js 

{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: ['es2015','react']  // <--- !`react` must be part of presets!
        }
      }
    ],
  }


#10 楼

终极解决方案

我在此
上浪费了3天

import react from 'react' unexpected identifier


我尝试修改webpack.config.js和package.json文件，并添加.babelrc，通过安装和更新软件包npm，我访问了很多页面，但没有任何效果。


什么有效？两个词：npm启动。没错。

在终端中运行

npm start


命令以启动本地服务器

...

（请注意，它可能不会立即起作用，但可能只是在您对npm进行了一些工作之后，因为在尝试执行此操作之前，我已删除了那些文件中的所有更改并起作用了，因此，确实完成了，请将其作为您的最后选择）


我在这个整洁的页面上找到了该信息。它是波兰语，但随时可以在其上使用Google翻译。