web-dev-qa-db-ja.com

Babelファイルは変換されずにコピーされます

私はこのコードを持っています：

"use strict";

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

let proxy = httpProxy.createProxyServer({});

babel-coreとbabel-cliをnpm経由でグローバルにインストールしました。ポイントは、私の端末でこれでコンパイルしようとするときです：

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

出力ファイルはコンパイルされずにコピーされます（つまり、ソースファイルと同じです）。

ここで何が欠けていますか？

javascriptbabeljs
105
Raul Vallespin

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バージョンでサポートされていないもののみを処理するようにプリセットに指示します。ブラウザのサポートが必要な場合は、ターゲットにブラウザのバージョンを含めることもできます。

165
loganfsmyth

私は別の原因で同じ問題を抱えていました：

ロードしようとしたコードはパッケージディレクトリの下になく、Babelはパッケージディレクトリの外部でのデフォルトのトランスコンパイルを行いません。

インポートしたコードを移動することで解決しましたが、おそらく、Babel構成に包含ステートメントを使用することもできたでしょう。

4
w00t

まず、次のnode modulesがあることを確認します。

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

次に、これをWebpackconfigファイル（webpack.config.js）に追加します。

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

参照：

幸運を！

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

2
Micah Stubbs

同じエラー、異なる原因：

トランスパイリングは以前に機能していましたが、突然機能しなくなり、ファイルがそのままコピーされました。

ある時点で.babelrcを開き、Windowsは.txtをファイル名に追加することにしました。 .babelrc.txtはbabelに認識されませんでした。 .txt接尾辞を削除すると修正されました。

0
robro

.babelrcを修正する

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

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
Legends

これらの答えのほとんどは時代遅れです。 @babel/preset-envと"@babel/preset-reactが必要です（2019年7月現在）。

0
mmla

最終的な解決策

これで3日無駄にした

import react from 'react' unexpected identifier

webpack.config.jsおよびpackage.jsonファイルを変更し、.babelrcを追加し、npmを介してパッケージをインストールおよび更新しようとしましたが、多くのページを訪れましたが、何も機能しませんでした。

何が効いた？ 2つの単語：npm start。そのとおり。

を実行

npm start

ターミナルのコマンドはローカルサーバーを起動します

...

（すぐに動作しないかもしれませんが、おそらくnpmでいくつかの作業を行った後にのみ、これを試す前にそれらのファイルのすべての変更を削除し、動作したので、 本当に完了したら、それを最後の手段として扱います）

このきちんとしたページ でその情報を見つけました。ポーランド語ですが、Google翻訳を自由に使用できます。

0
Aduku