Babel 文件被复制而不被转换

Posted 2023-02-22

【中文标题】Babel 文件被复制而不被转换

【英文标题】：Babel file is copied without being transformed

【发布时间】：2016-01-31 03:21:13

【问题描述】：

我有这个代码：

"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 但 import 语句仍然存在？

对于较新版本的 react，请使用新的 babel 模块：***.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"  ],
    ]

告诉预设只处理你的节点版本不支持的东西。如果您需要浏览器支持，您还可以在目标中包含浏览器版本。

【讨论】：

这很有用。他们为什么不把它放在文档中？全局安装 babel-preset 安全吗？

@kidcapital 文档确实包含此内容，但似乎只是作为旁注。我花了很多时间试图弄清楚如何在 babel 6.0 首次发布时正确配置它。

这篇文章的要点已添加为PR#72 设置页面的信息框。一个非常小的改进，但你必须从某个地方开始！谢谢洛根。

约定优于配置...所以开箱即用 Babel 什么都不做 - 只是复制文件？

请询问有关您设置的所有信息的新问题，以便有人回答。

【参考方案2】：

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

【参考方案3】：

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

我尝试加载的代码不在包目录下，Babel 不默认在包目录外转译。

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

【讨论】：

您能详细说明一下吗？我的前端代码也不是“在包目录下”，它工作正常。我的服务器代码包含“导入”，但 babel-cli 没有解决那些...

嗯，不知道要详细说明什么？ Babel 没有进行编译。试着查看你所有的 Babel 配置来源……

我要解决的问题是我的服务器文件被组织在几个文件夹中：我有 servers.js，然后是 /api/...stuff... 当我从内存中运行时，这些文件中的每个“导入”或“要求”都是动态解析的。当我从命令行运行 babel 时，我只输出一个文件，但不解析相对导入，所以我不能用它来运行我的服务器 ...

【参考方案4】：

首先确保您拥有以下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

祝你好运！

【参考方案5】：

截至2020, Jan:

第一步：安装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')
    ]
  ]
//...

祝你好运……

【讨论】：

嗨，Akash，我有旧的反应应用程序，当我尝试使用 webpack 4 进行构建时，我们在 .js 文件扩展中使用了类型，它给了我错误的意外令牌等，之前我们正在使用测试：/ \.jsx?$/, loader: 'babel', exclude: path.resolve(__dirname, "node_modules"), query: plugins: ['transform-runtime'], presets: ['es2015', 'stage-0 ', 'react'], 请帮我解决我在上面尝试过但没有运气的问题

嗨@MuhammadAsad，你能试试stage-2而不是stage-0吗？

【参考方案6】：

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

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

...然后使用预设创建一个.babelrc：

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

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

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

【参考方案7】：

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

转译以前工作过，然后突然停止工作，文件只是按原样复制。

原来我在某个时候打开了.babelrc，Windows 决定将.txt 附加到文件名中。现在 .babelrc.txt 没有被 babel 识别。删除 .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 start。没错。

运行

npm start 

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

...

（请注意，它可能不会立即起作用，但也许只有在您对 npm 进行了一些工作之后，因为在尝试之前我已经删除了这些文件中的所有更改并且它起作用了，所以 真正完成后，将其作为最后的手段）

---

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