Javascript Babel 文件被复制而不被转换

Question

提问by Raul Vallespin

I have this code:

我有这个代码：

"use strict";

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

let proxy = httpProxy.createProxyServer({});

and I have installed babel-coreand babel-cliglobally via npm. The point is when I try to compile with this on my terminal:

我已经安装babel-core，并babel-cli通过NPM全球。关键是当我尝试在我的终端上编译时：

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

The output file gets copied instead of compiled (I mean, it's the same as the source file).

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

What am I missing here?

我在这里缺少什么？

Answer 1

回答by loganfsmyth

Babel is a transformation framework. Pre-6.x, it enabled certain transformations by default, but with the increased usage of Node versions which natively support many ES6 features, it has become much more important that things be configurable. By default, Babel 6.x does not perform any transformations. You need to tell it what transformations to run:

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

npm install babel-preset-env

and run

并运行

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

or create a .babelrcfile containing

或创建一个.babelrc包含

{
    "presets": [
        "env"
    ]
}

and run it just like you were before.

并像以前一样运行它。

envin this case is a preset which basically says to compile all standard ES* behavior to ES5. If you are using Node versions that support some ES6, you may want to consider doing

env在这种情况下是一个预设，它基本上是说将所有标准 ES* 行为编译为 ES5。如果您正在使用支持某些 ES6 的 Node 版本，您可能需要考虑这样做

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

to tell the preset to only process things that are not supported by your Node version. You can also include browser versions in your targets if you need browser support.

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

Answer 2

回答by mmla

Most of these answers are obsolete. @babel/preset-envand "@babel/preset-reactare what you need (as of July 2019).

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

Answer 3

回答by w00t

I had the same problem with a different cause:

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

The code I was trying to load was not under the package directory, and Babel does not default to transpiling outside the package directory.

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

I solved it by moving the imported code, but perhaps I could have also used some inclusion statement in the Babel configuration.

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

Answer 4

回答by Akash

First ensure you have the following node modules:

首先确保您具有以下内容node modules：

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

Next, add this to your Webpack configfile (webpack.config.js) :

接下来，将其添加到您的 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
      } 
    } 
  ]
}
...

References:

参考：

Good Luck!

祝你好运！

Answer 5

回答by Akash

As of `2020, Jan`:

截至`2020, Jan`：

STEP 1: Install the `Babel presets`:

第 1 步：安装`Babel presets`：

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

STEP 2: Create a file: `babelrc.js`and add the `presets`:

第 2 步：创建一个文件：`babelrc.js`并添加`presets`：

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

STEP 3:- Install the `babel-loader`:

第 3 步：- 安装`babel-loader`：

yarn add -D babel-loader

STEP 4:- Add the loader config in your `webpack.config.js`:

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

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

Good Luck...

祝你好运...

Answer 6

回答by Micah Stubbs

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

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

...and then creating a .babelrcwith the presets:

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

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

...resolved a very similar issue for me, with babel 3.8.6, and node v5.10.1

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

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

Answer 7

回答by robro

Same error, different cause:

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

Transpiling had worked before and then suddenly stopped working, with files simply being copied as is.

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

Turns out I opened the .babelrcat some point and Windows decided to append .txtto the filename. Now that .babelrc.txtwasn't recognized by babel. Removing the .txtsuffix fixed that.

结果我.babelrc在某个时候打开了，Windows 决定附加.txt到文件名。现在这.babelrc.txt不被 babel 识别。删除.txt后缀解决了这个问题。

Answer 8

回答by OSP

fix your .babelrc

修复你的 .babelrc

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

Answer 9

回答by Legends

In year 2018:

2018年：

Install following packages if you haven't yet:

如果您还没有安装以下软件包：

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 10

回答by Aduku

Ultimate solution

终极解决方案

I wasted 3 days on this

我在这个上浪费了 3 天

import react from 'react' unexpected identifier

I tried modifying webpack.config.jsand package.jsonfiles, and adding .babelrc, installing & updating packages via npm, I've visited many, many pages but nothing has worked.

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

What worked? Two words: npm start. That's right.

什么工作？两个字：npm start。这是正确的。

run the

跑过

npm start

command in the terminalto launch a local server

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

...

(mind that it might not work straight away but perhapsonly after you do some work on npm because before trying this out I had deleted all the changes in those files and it worked, so after you're really done, treat it as your last resort)

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

I found that info on this neat page. It's in Polish but feel free to use Google translate on it.

我在这个整洁的页面上找到了这些信息。它是波兰语，但可以随意使用谷歌翻译。

Javascript Babel 文件被复制而不被转换

提问by Raul Vallespin

回答by loganfsmyth

回答by mmla

回答by w00t

回答by Akash

回答by Akash

As of `2020, Jan`:

截至`2020, Jan`：

STEP 1: Install the `Babel presets`:

第 1 步：安装`Babel presets`：

STEP 2: Create a file: `babelrc.js`and add the `presets`:

第 2 步：创建一个文件：`babelrc.js`并添加`presets`：

STEP 3:- Install the `babel-loader`:

第 3 步：- 安装`babel-loader`：

STEP 4:- Add the loader config in your `webpack.config.js`:

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

回答by Micah Stubbs

回答by robro

回答by OSP

回答by Legends

回答by Aduku

相关推荐

最近更新

标签

Javascript Babel 文件被复制而不被转换

提问by Raul Vallespin

回答by loganfsmyth

回答by mmla

回答by w00t

回答by Akash

回答by Akash

As of 2020, Jan:

截至2020, Jan：

STEP 1: Install the Babel presets:

第 1 步：安装Babel presets：

STEP 2: Create a file: babelrc.jsand add the presets:

第 2 步：创建一个文件：babelrc.js并添加presets：

STEP 3:- Install the babel-loader:

第 3 步：- 安装babel-loader：

STEP 4:- Add the loader config in your webpack.config.js:

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

回答by Micah Stubbs

回答by robro

回答by OSP

回答by Legends

回答by Aduku

相关推荐

Javascript 如何在javascript中捕获“History.Back”事件？

Javascript this.setState 不是函数

Javascript 将外部页面 html 插入页面 html

Javascript 将带有符号的 ES6 类转换为 JSON

相关推荐

最近更新

标签

As of `2020, Jan`:

截至`2020, Jan`：

STEP 1: Install the `Babel presets`:

第 1 步：安装`Babel presets`：

STEP 2: Create a file: `babelrc.js`and add the `presets`:

第 2 步：创建一个文件：`babelrc.js`并添加`presets`：

STEP 3:- Install the `babel-loader`:

第 3 步：- 安装`babel-loader`：

STEP 4:- Add the loader config in your `webpack.config.js`:

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