IT박스

Babel 파일은 변형되지 않고 복사됩니다.

itboxs 2020. 8. 12. 07:59
반응형

Babel 파일은 변형되지 않고 복사됩니다.


이 코드가 있습니다.

"use strict";

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

let proxy = httpProxy.createProxyServer({});

내가 설치 babel-corebabel-cli세계적으로 NPM을 통해. 요점은 터미널에서 이것을 컴파일하려고 할 때입니다.

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

출력 파일은 컴파일되는 대신 복사됩니다 (즉, 소스 파일과 동일 함).

내가 여기서 무엇을 놓치고 있습니까?


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은 기본적으로 패키지 디렉토리 외부에서 트랜스 파일하지 않습니다.

가져온 코드를 이동하여 문제를 해결했지만 Babel 구성에 포함 문을 사용할 수도 있습니다.


먼저 다음이 있는지 확인하십시오 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
      } 
    } 
  ]
}
...

참조 :

Good Luck!


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

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

...and then creating a .babelrc with the presets:

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

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

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


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 .babelrc at some point and Windows decided to append .txt to the filename. Now that .babelrc.txt wasn't recognized by babel. Removing the .txt suffix fixed that.


fix your .babelrc

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

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

Ultimate solution

I wasted 3 days on this

import react from 'react' unexpected identifier

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


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

run the

npm start 

command in the terminal to launch a local server

...

(mind that it might not work straight away but perhaps only 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)


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


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

참고URL : https://stackoverflow.com/questions/33440405/babel-file-is-copied-without-being-transformed

반응형