vue-cli에서 babel 구성 파일을 구성하는 방법-JS 튜토리얼-php.cn

vue-cli에서 babel 구성 파일을 구성하는 방법

亚连

풀어 주다： 2018-06-05 15:27:22

원래의

3336명이 탐색했습니다.

Babel은 ES6 코드를 ES5 코드로 변환하여 기존 환경에서 실행할 수 있도록 널리 사용되는 트랜스코더입니다. 이번 글에서는 vue-cli 스캐폴딩 도구의 루트 디렉터리에 있는 babelrc 구성 파일을 소개합니다. 관심 있는 친구들은 함께 살펴보세요

이 글에서는 vue-cli 스캐폴딩 도구의 루트 디렉터리에 있는 babelrc 구성 파일을 소개합니다

소개

es6 기능 브라우저 아직 모두 지원되지는 않지만 es6을 사용하는 것이 일반적인 추세이므로 es6 코드를 브라우저가 인식할 수 있는 코드로 변환하기 위해 babel이 탄생했습니다

babel은 특별한 명령줄 도구를 제공합니다. 트랜스코딩을 쉽게 하면 스스로 배울 수 있습니다

vue-cli scaffolding의 .babelrc 파일

{
 // 此项指明，转码的规则
 "presets": [
 // env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件，不进行转码
 ["env", { "modules": false }],
 // 下面这个是不同阶段出现的es语法，包含不同的转码插件
 "stage-2"
 ],
 // 下面这个选项是引用插件来处理代码的转换，transform-runtime用来处理全局函数和优化babel编译
 "plugins": ["transform-runtime"],
 // 下面指的是在生成的文件中，不产生注释
 "comments": false,
 // 下面这段是在特定的环境中所执行的转码规则，当环境变量是下面的test就会覆盖上面的设置
 "env": {
 // test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
 "test": {
  "presets": ["env", "stage-2"],
  // instanbul是一个用来测试转码后代码的工具
  "plugins": ["istanbul"]
 }
 }
}

로그인 후 복사

ps: .babelrc 구성 파일에 대해 소개하겠습니다

React 프로젝트 구조와 관련하여 여러 가지가 있습니다. 때로는 이해하기 어려운 구성 파일입니다.

예를 들어 .babelrc 파일은 트랜스코딩 규칙과 플러그인을 설정하는 데 사용됩니다.

Linux에 익숙하다면 rc로 끝나는 파일은 일반적으로 런타임 시 자동으로 로드되는 파일, 구성 등을 나타낸다는 것을 알아야 합니다. babel6에서는 이 파일이 필수적입니다.
나중에 babel의 cli를 사용할 때 더 적은 구성을 사용할 수 있습니다. BABEL_ENV或者NODE_ENV로 지정된 다양한 환경 변수에 대해 다양한 컴파일 작업을 수행할 수 있는 env 필드도 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.