vue-clibabel 구성 파일.babelrc를 사용하는 방법

이번에는 vue-clibabel구성 파일.babelrc 사용법과 vue-clibabel 구성 파일 .babelrc 사용 시 주의사항에 대해 알려드리겠습니다.

이 글에서는 vue-cli 스캐폴딩 도구

의 루트 디렉터리에 있는 babelrc 구성 파일을 소개합니다. 소개

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

Babel은 트랜스코딩을 용이하게 하는 특별한 명령줄 도구를 제공합니다. 이에 대해 직접 배울 수 있습니다

vue-cli 스캐폴딩을 위한 .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를 사용할 때 더 적은 구성을 사용할 수 있습니다. 로 지정된 다양한 환경 변수에 대해 다양한 컴파일 작업을 수행할 수 있는 env 필드도 있습니다.
BABEL_ENV或者NODE_ENV이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vuex 돌연변이 및 동작 사용에 대한 자세한 설명

FileReader는 이미지를 업로드하기 전에 로컬 미리보기를 구현합니다

위 내용은 vue-clibabel 구성 파일.babelrc를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!