Babel文件未经转换即被复制

Question

我有这段代码：

"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

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

我在这里缺少什么？

Answer 1

Babel是一个转型框架。在6.x之前，默认情况下它启用了某些转换，但随着Node版本的使用增加，本地支持许多ES6功能，事情可配置变得更加重要。默认情况下，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版本不支持的内容。如果您需要浏览器支持，还可以在目标中包含浏览器版本。

Answer 2

我遇到了同样的问题：

我尝试加载的代码不在包目录下，而且Babel不会默认在包目录之外进行转换。

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

Answer 3

首先确保您拥有以下node modules：

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

接下来，将其添加到您的Webpack config 文件（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

祝你好运！

Answer 4

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-node5
https://www.npmjs.com/package/babel-preset-react

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

祝你好运...

Answer 6

同样的错误，原因不同：

之前已经开始运行，然后突然停止工作，文件只是按原样复制。

结果我在某个时刻打开了.babelrc，Windows决定将.txt附加到文件名。现在，.babelrc.txt并未被巴贝尔认出。删除固定的.txt后缀。

Answer 7

修复.babelrc

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

Answer 8

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!
        }
      }
    ],
  }

Answer 9

最终解决方案

我为此浪费了3天

import react from 'react' unexpected identifier

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

---

什么有效？两个词：npm启动。是的。

运行

npm start 

终端中的命令以启动本地服务器

...

（请注意，它可能无法立即运行，但是也许只是在您对npm进行了一些工作之后，因为在尝试执行此操作之前，我已经删除了那些文件中的所有更改，并且可以正常工作，所以在您真正完成操作后，将其作为您的最后选择）

---

我在this neat page上找到了该信息。它是波兰语，但随时可以在其上使用Google翻译。

Answer 10

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