[javascript] 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/preset-env그리고 "@babel/preset-react당신은 (7 월 2019로) 필요합니다.


답변

다른 원인으로 동일한 문제가 발생했습니다.

로드하려는 코드는 패키지 디렉토리 아래에 있지 않으며 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
      }
    }
  ]
}
...

참조 :

행운을 빕니다!


답변

현재 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')
    ]
  ]
//...
}

행운을 빕니다…


답변

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

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

.babelrc사전 설정으로 를 생성합니다 .

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

… 바벨 3.8.6및 노드를 사용 하여 저에게 매우 유사한 문제를 해결했습니다.v5.10.1

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


답변

동일한 오류, 다른 원인 :

트랜스 파일링은 이전에 작동했지만 갑자기 작동이 중지되었으며 파일은 그대로 복사됩니다.

내가 .babelrc어느 시점에서 열었고 Windows는 .txt파일 이름 에 추가 하기 로 결정했습니다 . 이제 그것은 .babelrc.txt바벨에 의해 인식되지 않았습니다. .txt접미사를 제거하면 수정되었습니다.