집 > 기사 > 웹 프론트엔드 > es6 실행 환경을 구축하는 방법

es6 실행 환경을 구축하는 방법

青灯夜游원래의: 2022-10-17 15:56:101534검색

빌딩 단계: 1. "npm install --save-dev babel-cli" 구문을 사용하여 babel-cli 도구를 설치합니다. 2. "npm install --save-dev babel-preset-es2015 babel" 구문을 사용하여 종속성을 설치합니다. -cli" ; 3. 루트 디렉터리에 ".babelrc" 파일을 구성하고 트랜스코딩 규칙을 설정합니다. 4. package.json에서 스크립트 명령 실행 항목을 수정합니다.

es6 실행 환경을 구축하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

es6의 장점(주제 제외):

es6은 ECMAScript2015입니다. es6은 js의 하위 집합이지만 우리가 일반적으로 이야기하는 js는 es6 이전 버전입니다. js 자체는 매우 불완전한 언어이지만 es6은 구문 설탕을 통해 js의 추악한 부분을 많이 숨깁니다. 프론트엔드와 백엔드에 대한 비동기 요청 메소드를 포함하여 자바스크립트 데이터 처리, 화살표 함수, 구조 분해 할당, 기본 매개변수(기본 매개변수), 클래스(classes), 모듈(modules) 등과 같은 많은 기능을 제공합니다. 대규모 프런트엔드에서 발생하는 문제를 해결합니다.

es6용 개발 환경 구축(es6를 es5로 변환)

일을 잘하고 싶다면 먼저 도구를 갈고닦아야 합니다, ㅎㅎ 그러니 첫 번째 단계는 es6 개발 환경 구축입니다. 하위 버전 브라우저는 실행 환경에서 es6 구문을 es5 구문으로 변환해야 하는 es6 구문을 지원하지 않습니다. Webpack에는 vue에 자동 컴파일 및 변환 기능이 있습니다.

Babel

은 ES6 코드를 ES5 코드로 변환하여 기존 환경에서 실행할 수 있도록 널리 사용되는 트랜스코더입니다.

이는 기존 환경이 지원하는지 여부에 대한 걱정 없이 이제 ES6에서 프로그램을 작성할 수 있다는 의미입니다. 아래는 예시입니다.

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});
//上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScript环境执行了。

1. babel

Babel 설치 명령줄 트랜스코딩을 위한 babel-cli 도구를 제공합니다.

설치 명령은 다음과 같습니다.

//需要先安装babel-cli
npm install --global babel-cli

babel

Babel提供babel-cli工具，用于命令行转码。

它的安装命令如下：

{
  "presets": [],
  "plugins": []
}

2.配置文件`.babelrc`

Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。

该文件用来设置转码规则和插件，基本格式如下。

# ES2015转码规则
npm install --save-dev babel-preset-es2015

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

//例如：按需求添加
{
    "presets": [
      	"es2015",
      	"stage-2"
    ],
	"plugins": []
}

然后，将这些规则加入.babelrc。

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

3.用法

# 安装
npm install --save-dev babel-cli

上面代码是在全局环境下，进行Babel转码。这意味着，如果项目要运行，全局环境必须有Babel，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的Babel。

一个解决办法是将babel-cli安装在项目之中。

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

然后，改写package.json。

npm run build

转码的时候，就执行下面的命令。

npm init -y

看一万遍，不如自己真正实践一遍

第一步：（创建本地项目以及目录）

本地新建文件夹，重命名为es6test,用vscode代码编辑器打开，在文件夹下新建两个文件，分别是项目文件src，以及打包文件dist文件，在src文件夹下新建index.html文件，并列新建index.js文件，并将index.js文件引入index.html

es6 실행 환경을 구축하는 방법

第二步：（初始化项目，添加转码依赖包）

打开vscode终端 ctrl +~,在文件根目录下初始化项目：

npm install -g cnpm --registry=https://registry.npm.taobao.org

会生成一个package.json文件, -y的目的是在初始化时配置默认值，后续在生成的文件中修改即可。

es6 실행 환경을 구축하는 방법

npm太慢,先安装个cnpm

cnpm install -g babel-cli

在终端全局安装babel-cli2. 구성 파일 .babelrc

Babel의 구성 파일은 .babelrc에 저장되어 있습니다. 루트 디렉토리 아래의 프로젝트. Babel을 사용하는 첫 번째 단계는 이 파일을 구성하는 것입니다.

트랜스코딩 규칙 및 플러그인을 설정하는 데 사용되는 파일입니다. 기본 형식은 다음과 같습니다.

babel src/index.js -o dist/index.js

presets 필드는 트랜스코딩 규칙을 설정합니다. 다음 규칙 세트는 공식적으로 제공되며 필요에 따라 설치할 수 있습니다. es6 실행 환경을 구축하는 방법

cnpm install --save-dev babel-preset-es2015 babel-cli

그런 다음 이 규칙을 .babelrc에 추가하세요.

cnpm run build

3. Usage
rrreee

위 코드는 글로벌 환경에서 Babel 트랜스코딩에 사용됩니다. 즉, 프로젝트를 실행하려면 글로벌 환경에 Babel이 있어야 하며, 이는 프로젝트가 환경에 종속된다는 의미입니다. 반면, 다른 버전의 Babel을 사용하는 다른 프로젝트는 지원하지 않습니다.

es6 실행 환경을 구축하는 방법 한 가지 해결책은 프로젝트에 babel-cli를 설치하는 것입니다.

rrreee

그런 다음 package.json을 다시 작성하세요. rrreee트랜스코딩 시 다음 명령어를 실행하세요. rrreee

만 번 봤으니 직접 연습해 보세요

es6 실행 환경을 구축하는 방법

🎜🎜1단계: (로컬 프로젝트 및 디렉터리 만들기)🎜🎜🎜🎜로컬에서 새 폴더를 만들고 이름을 es6test로 바꾸고 엽니다. vscode 코드 편집기를 사용하여 폴더 아래에 두 개의 새 파일, 즉 프로젝트 파일 src와 패키징 파일 dist 파일을 만듭니다. src 폴더 아래에 새 index.html 파일을 만들고 새 index.js 파일을 나란히 만듭니다. index.js 파일을 index.html에 추가하세요 🎜🎜 es6 실행 환경을 구축하는 방법

🎜🎜🎜 🎜2단계: (프로젝트 초기화 및 트랜스코딩 종속성 패키지 추가) 🎜🎜🎜🎜vscode 터미널 ctrl +~를 열고 파일 루트 디렉터리에서 프로젝트를 초기화합니다. 🎜rrreee🎜는 package.json 파일에서 -y의 목적은 초기화 시 기본값을 구성한 후 생성된 파일에서 수정하는 것입니다. 🎜🎜 es6 실행 환경을 구축하는 방법

🎜🎜npm 너무 느립니다. 먼저 cnpm을 설치하세요🎜rrreee🎜명령줄 트랜스코딩을 위해 터미널에 전역적으로 babel-cli 도구를 설치하세요🎜rrreee🎜여기서 작동하는지 확인하고 싶습니다. 트랜스코딩이 가능합니다. 터미널에서 먼저 테스트해봤습니다🎜rrreee🎜예상했던 것과는 다릅니다. 확실히 작동하지 않습니다! dist 파일 아래에 index.js 파일이 생성되지만 es5 구문으로 변환되지 않습니다🎜🎜🎜🎜🎜 그런 다음 두 개의 종속성 패키지를 로컬로 설치하세요🎜rrreee🎜 package.json에 다음 내용이 나타나면 축하합니다. 모든 종속성 패키지 설치되었습니다🎜🎜🎜🎜🎜🎜🎜🎜3단계: (루트 디렉터리에 .babelrc 파일 구성)🎜🎜🎜🎜🎜🎜

第四步：（package.json中修改scripts命令执行项）

es6 실행 환경을 구축하는 방법