programing

리액트 및 웹팩을 사용하여 Babel 6 Stage 0을 설정하는 방법

testmans 2023. 3. 6. 20:50
반응형

리액트 및 웹팩을 사용하여 Babel 6 Stage 0을 설정하는 방법

의사 선생님께서 양해해 주십시오.

Babel 6 는 es2015, react, stage-x 3 3 가 bab bab bab bab bab bab bab bab bab bab bab bab bab bab 。그것들을 셋팅할 수 있다고 읽었습니다..babelrc다음과 같이 합니다.

{
  "presets": ["es2015", "react", "stage-0"]
}

또는 패키지에 직접 담습니다.JSON은 다음과 같습니다.

{
  ...,
  "version": x.x.x,
  "babel": {
    "presets": ["es2015", "react", "stage-0"]
  },
  ...,
}

babel-loader를 웹 팩과 함께 사용할 수 있습니다.

loader: 'babel?presets[]=es2015'


나의 고민

모든 정리하기 나는 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ를 한다.babel-loaderBabel6에서 작동하도록 방금 업데이트된 웹 팩 구성입니다.

module.exports = function(options) {
  var jsLoaders = ['babel?presets[]=es2015'];
  [...]
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: jsLoaders
      },
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loaders: options.production ? jsLoaders : ['react-hot'].concat(jsLoaders)
      },
      [...]


컴파일을 할 때 .babelrc root or roots options in in or in in in로 설정package.JSON 경우에만 클래스의 치 않은 토큰 가 발생합니다 babel-loader es 2015 」 2015た 、 「 React 」 구 proptypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypes class classtypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypestypes class classtypestypestypes class class classtypestypestypestypes

ERROR in ./app/components/form/index.jsx
Module build failed: SyntaxError: /Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx: Unexpected token (19:19)
  17 | // ES6 React Component:
  18 | export default class SurveyForm extends Component {
> 19 |   static propTypes = {
     |                    ^

.stage-1,즉 「」, 「」transform-class-properties 저는 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아stage-0지금 당장.
하지만
, 「 」를 해 주세요..babelrc ''의 정의'를 지정합니다.package.JSON위와 같이 매우 이상한 빌드 실패 오류가 발생합니다.

ERROR in ./app/components/form/index.jsx
Module build failed: Error: /Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?
    at NodePath.insertAfter (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/modification.js:181:13)
    at NodePath.replaceWithMultiple (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/replacement.js:92:8)
    at handleClassWithSuper (/Library/WebServer/Documents/yarsk.test/node_modules/babel-plugin-transform-class-constructor-call/lib/index.js:80:10)
    at PluginPass.Class (/Library/WebServer/Documents/yarsk.test/node_modules/babel-plugin-transform-class-constructor-call/lib/index.js:101:11)
    at newFn (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/visitors.js:233:27)
    at NodePath._call (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:72:18)
    at NodePath.call (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:44:17)
    at NodePath.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:102:12)
    at TraversalContext.visitQueue (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:151:16)
    at TraversalContext.visitSingle (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:111:19)
    at TraversalContext.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:195:19)
    at Function.traverse.node (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/index.js:139:17)
    at NodePath.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:106:22)
    at TraversalContext.visitQueue (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:151:16)
    at TraversalContext.visitMultiple (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:106:17)
    at TraversalContext.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:193:19)
    at Function.traverse.node (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/index.js:139:17)
 @ ./app/index.jsx 9:0-28

ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ.Module build failed: Error: /.../index.jsx: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?

여기가 내가 갇힌 곳이야.이 컴포넌트를 Babel5로 작성했습니다.이때 Babel로더를 사용하여 컴파일을 할 수 있었고, 모든 것이 정상적으로 동작했습니다.

loader: 'babel?optional[]=runtime&stage=0

이제 언급된 오류가 컴파일됩니다.

  • ★★★★★★★★★★★★★★★★★★★★?babel-loaderissue, ""」를 해 주세요.babel
  • 서 '어디서'를 설정해야 요?stage-0러가나 나???


갱신하다

사전 설정을 사용하여 컴파일하고 클래스 내보내기 버그에 대해 언급된 회피책을 사용하는 경우(생성할 때까지 클래스를 내보내서는 안 됩니다) 사전 설정 순서에 따라 오류 메시지가 변경됩니다.★★★★★★을 설정했을 때stage-0 번째 는 '오류'입니다.'this' is not allowed before super() (This is an error on an internal node. Probably an internal error)stage-0두 번째 또는 세 번째 구문 오류에 대한 메시지를 위에서 받습니다.


최근.

이러한 버그에 관한 최신 정보에 대해서는, 제 투고 또는 패브릭의 새로운 바벨의 문제 트래커를 참조해 주세요.(기본 컴파일은 6.2.1 현재 수정되어 있습니다만, 현재 다른 일이 발생하고 있습니다.)

이 문서에서 언급한 모든 버그는 Babel 6.3.x에서 완전히 수정되었습니다.문제가 해결되지 않으면 의존관계를 갱신해 주세요.

여기서 마주친 두 가지 꽤 무거운 버그, 즉 정적 속성을 가진 ES6 클래스의 직접 내보내기 및 ES6 컨스트럭터의 문제는 이 스레드의 답변에서 논의되며, GitHub에서 명시적으로 볼 수 있습니다(내보내기 버그).(GitHub 이슈 트래커는 폐쇄되었으며 문제, 버그 및 요청은 여기로 이동되었습니다.)

둘 다 공식적으로 확인된 버그이며, Babel 6.3.17 이후 수정되었습니다.

(6.3.x 이전 버전이 아니라 한두 개 이전 버전일 수도 있습니다.이 버전이 제가 사용하고 있는 버전이고 모든 것이 Babel5에서 정상적으로 동작하고 있습니다.모두 해피 코딩입니다.)

(기록의 경우:)

따라서 CLI에서 다음 오류 메시지가 표시될 경우:

We don't know what to do with this node type. We were previously a Statement but we can't fit in here?

다음과 같은 정적 속성을 가진 ES6 클래스를 내보내는 경우(이 클래스는 더 이상 확장되는 클래스와 연결되어 있지 않고 정적 속성을 가진 클래스에 연결되어 있는 것 같습니다.

import React, { Component, PropTypes } from 'react'

export default class ClassName extends Component {
  static propTypes = {...}
  // This will not get compiled correctly for now, as of Babel 6.1.4
}

Stryzhevskii와 GitHub의 여러 사람이 언급한 간단한 회피책은 다음과 같습니다.

import React, { Component, PropTypes } from 'react'

class ClassName extends Component {
  static propTypes = {...}
}
export default ClassName // Just export the class after creating it


두 번째 문제는 다음 오류에 관한 것입니다.

'this' is not allowed before super() (This is an error on an internal node. Probably an internal error)

Domino Tobias가 지적한 바와 같이 합법적인 규칙이지만 이는 자체 속성을 가진 확장 클래스가 이 메시지 또는 유사한 메시지를 던질 것으로 보이는 확인된 오류입니다.현재로선 이 문제에 대한 해결방안은 보이지 않습니다.많은 사람들이 이러한 이유로 Babel5로 돌아갔습니다(6.1.4 현재).

아마도 이것은 Babel 6.1.18(위 GitHub호 참조)의 릴리스로 해결되었을 것입니다만, 저를 포함한 사람들은 여전히 똑같은 문제가 발생하고 있다고 생각합니다.

, 에서는, 「 프리셋」을해 주세요.stage-x,react ★★★★★★★★★★★★★★★★★」es2015중요한 것 같아서 출력이 바뀔 수 있습니다.

Babel 6.2.1 현재

이 두 가지 버그는 모두 수정되었고 코드는 컴파일은 정상입니다.하지만... 많은 사람들의 반응에 영향을 미치는 또 다른 사건이 있어ReferenceError: this hasn't been initialised - super() hasn't been called실행 시.여기서 참조합니다.채널 고정...


Babel 6.3.17 이후 완전 수정

(6.3.x 이전 버전이 아니라 한두 개 이전 버전일 수도 있습니다.이 버전이 제가 사용하고 있는 버전이고 모든 것이 Babel5에서 정상적으로 동작하고 있습니다.모두 해피 코딩입니다.)

이러한 구조로 내보내기를 대체해 보십시오.

class SurveyForm extends Component {/*implementation*/}
export default SurveyForm

다음은 Babel 6, React, Webpack 및 Sequelize의 작업 예입니다.

https://github.com/BerndWessels/react-webpack

은 ★★★★★★★★★★★★★★★★★★★★★★★★★」.babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "env": {
    "development": {
      "plugins": [
        "babel-relay-plugin-loader",
        [
          "react-transform",
          {
            "transforms": [
              {
                "transform": "react-transform-hmr",
                "imports": [
                  "react"
                ],
                "locals": [
                  "module"
                ]
              },
              {
                "transform": "react-transform-catch-errors",
                "imports": [
                  "react",
                  "redbox-react"
                ]
              }
            ]
          }
        ]
      ]
    },
    "production": {
      "plugins": [
        "babel-relay-plugin-loader"
      ]
    }
  }
}

이게 모듈 버전입니다.

babel-core@6.3.17
babel-loader@6.2.0
babel-plugin-react-transform@2.0.0-beta1
babel-preset-es2015@6.3.13
babel-preset-react@6.3.13
babel-preset-stage-0@6.3.13

저는 좋아요.

동일한 문제가 발생한 후 아래의 WebPack 구성을 사용하여 React와 함께 작업할 수 있었습니다.

module.exports = {
  entry: './app/Index.js',
  output: { path: __dirname, filename: 'dist/bundle.js' },
  module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel',
            query: {
                presets: ['react']
            }
        }
    ]
  }
};

babel-preset-react도 설치해야 했습니다.

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

편집: 물론 ES6를 작성하는 경우에도 ES2015 사전 설정이 필요할 수 있습니다.

Babel 프리셋은 https://github.com/babel/babel/tree/development/packages에서 확인할 수 있습니다.

해봤어?

presets: [{
    plugins: [
        'transform-class-properties'
    ]
}, 'stage-0', 'es2015', 'react']

사용해보셨나요?stage-1?

쿼리 속성을 사용한 것이 효과가 있었습니다.

```
module: {
  loaders: [{
    test: /\.jsx?$/, 
    loader: 'babel',
    query: {
      presets: ['es2015', 'stage-1', 'react']
    }
  }]
}
```

물론 못 써봤지만.babelrc및 babel 옵션package.json아직 알아보는 중이에요babel-*v6.0

언급URL : https://stackoverflow.com/questions/33455166/how-to-set-up-babel-6-stage-0-with-react-and-webpack

반응형

'programing' 카테고리의 다른 글

Angular JS는 Google Closure와 어떤 관계가 있습니까?  (0) 2023.03.06
React가 있는 Wordpress 플러그인의 쇼트 코드 특성  (0) 2023.03.06
왜 몽구스는 스키마와 모델을 모두 가지고 있을까요?  (0) 2023.03.06
'Element' 형식의 인수는 'ReactElement' 형식의 매개 변수에 할당할 수 없습니다.  (0) 2023.03.06
Autoahead.js 0.10 단계별 / remote / prefetch / local 사용방법  (0) 2023.03.06

'programing'의 다른글

  • 현재글리액트 및 웹팩을 사용하여 Babel 6 Stage 0을 설정하는 방법

관련글

댓글

티스토리툴바