Babel文件被复制而不进行转换


106

我有这个代码:

"use strict";

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

let proxy = httpProxy.createProxyServer({});

并且我已经通过npm 安装babel-corebabel-cli在全球范围内使用。关键是当我尝试在终端上使用此代码进行编译时:

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

输出文件被复制而不是编译(我的意思是,它与源文件相同)。

我在这里想念什么?


做了let改变var,但import声明仍?
2015年

对于较新版本的react,请使用新的babel模块:stackoverflow.com/a/53927457/6665568 。它具有更好的错误消息,并支持react的新功能。
Natesh bhat

Answers:


165

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版本不支持的事情。如果需要浏览器支持,也可以在目标中包括浏览器版本。


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

@kidcapital文档确实包含此内容,但似乎只是作为旁注。我花了很多时间试图弄清楚如何在重新发布babel 6.0时对其进行正确配置。
尼克

根据PR#72在“设置”页面上已将此帖子的要点添加为信息框。很小的改进,但是您必须从某个地方开始!谢谢洛根。
尼克,

7
对于配置方面的约定而言,如此之多……开箱即用,Babel什么也不做-仅复制文件?
alex.p,2016年

请询问有关您设置的所有信息的新问题,以便其他人可以回答。
loganfsmyth

5

这些答案大多数都是过时的。@babel/preset-env以及"@babel/preset-react您需要的是什么(截至2019年7月)。


3

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

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

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


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

嗯,不确定要讲些什么?巴别塔没有转嫁。尝试查看您所有的Babel配置资源…
w00t

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

3

首先确保您具有以下条件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
      } 
    } 
  ]
}
...

参考文献:

祝好运!


2

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

祝好运...



1

错误相同,原因不同:

转储以前曾经工作过,然后突然停止工作,只是按原样复制文件。

原来,我.babelrc在某个时候打开,Windows决定追加.txt到文件名。现在,.babelrc.txt通天塔还没有意识到这一点。删除.txt后缀可解决该问题。


0

修复您的.babelrc

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

0

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

0

终极解决方案

我为此浪费了三天

import react from 'react' unexpected identifier

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


什么有效?两个词:npm开始。那就对了。

跑过

npm start 

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

...

(请注意,它可能无法立即生效,但可能只是在您对npm进行一些工作之后,因为在尝试之前,我已经删除了那些文件中的所有更改,并且都可以正常工作,因此,在您真正完成操作之后,请将其视为最后一个度假村


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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.