목차
1. eslint 구성
二、配置babel
三、配置postcss
웹 프론트엔드 JS 튜토리얼 Vue 프론트엔드 아키텍처 학습(2)

Vue 프론트엔드 아키텍처 학습(2)

Feb 02, 2018 pm 01:56 PM
프런트 엔드 공부하다 건축학

이번 글에서는 이전 글인 Vue 프론트엔드 아키텍처 학습(1)에 이어 eslint, babel, postcss 구성을 완성해보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. eslint 구성

eslint --init을 사용하여 eslintrc.js를 만듭니다. eslint --init的方式来创建eslintrc.js。
对了,前提我们需要全局安装eslint:npm i -g eslint
安装完全局eslint以后,我们在项目根目录使用eslint --init,我选择自定义的方式来规定eslint规则:

➜  vue-construct git:(master) ✗ eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser, Node
? Do you use CommonJS? Yes
? Do you use JSX? No
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? No
? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript
로그인 후 복사

当然,你可以按照自己喜欢,选择自己想要的方式,比如How would you like to configure ESLint? 这个问题的时候,可以选择popular的规则,有Google、standard等规则,选择你想要的就好。

我po下我的配置吧:

// 创建这个文件的话,本王推荐用eslint --init创建
module.exports = {
    "env": {
        "browser": true,
        "node": true
    },
    // https://stackoverflow.com/questions/38296761/how-to-support-es7-in-eslint
    // 为了让eslint支持es7或更高的语法
    "parser": 'babel-eslint',
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "plugins": [
        // https://github.com/BenoitZugmeyer/eslint-plugin-html
        // 支持 *.vue lint
        "html"
    ],
    // https://eslint.org/docs/rules/
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ],
        // https://eslint.org/docs/user-guide/configuring#using-configuration-files
        // "off" or 0 - turn the rule off
        // "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
        // "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'no-console': 0,
    }
};
로그인 후 복사

二、配置babel

创建.babelrc文件,直接上配置:

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "ie >= 10"
          ]
        },
        "modules": false,
        "useBuiltIns": true
      }
    ]
  ],
  "plugins": [
    "transform-object-rest-spread",
    "syntax-dynamic-import"
  ]
}
로그인 후 복사

配合webpack配置:

{
    test: /\.js$/,
    include: [resolve('app')],
    use: [
      'babel-loader',
      'eslint-loader'
    ]
},
로그인 후 복사

我们使用的是babel-preset-env,我们知道,babel只是转译了高级语法,比如lambda,class,async等,并不会支持高级的api,所以需要babel-polyfill的帮忙。方便的是,我们只需要"useBuiltIns": true,然后npm安装babel-polyfill,再在webpack配置中的entry带上babel-polyfill就好了。

babel-preset-env的优点:

  1. 通过targets来决定支持到那个哪些版本的语法就够了,不会过渡转译,可控性强

  2. 通过useBuiltIns来支持babel-polyfill的按需加载,而不是一口气把整个包打入,因为其实我们只用到了很小一部分

transform-object-rest-spread是为了支持const a = {name: kitty, age: 7}; const b = { ...a }这种es7语法。

syntax-dynamic-import是为了支持const Home = () => import('../views/home')这种语法,达到按需分割、加载的目的。

三、配置postcss

创建postcss.config.js그런데, eslint를 전역적으로 설치해야 합니다: npm i -g eslint.

전체 eslint를 설치한 후 프로젝트 루트 디렉터리에서 eslint --init를 사용합니다. eslint 규칙을 지정하는 사용자 정의 방법을 선택합니다.

module.exports = {
  plugins: [
    require('autoprefixer')
  ],
  // 配置autoprefix
  browsers: [
    "> 1%",
    "last 2 versions",
    "ie >= 10"
  ]
}
로그인 후 복사

물론 원하는 것을 선택할 수 있습니다. 예를 들어, ESLint를 어떻게 구성하시겠습니까? 이 질문을 받으면 Google, 표준 및 기타 규칙과 같은 널리 사용되는 규칙을 선택할 수 있습니다.

내 구성을 게시하겠습니다:

rrreee
2. babel 구성

.babelrc 파일을 생성하고 직접 구성합니다: rrreeewebpack으로 구성:

rrreee

우리는 babel -preset을 사용하고 있습니다. -env, babel은 람다, 클래스, async 등과 같은 상위 수준 구문만 변환하고 고급 API를 지원하지 않는다는 것을 알고 있으므로 babel-polyfill의 도움이 필요합니다. 편리한 점은 "useBuiltIns": true만 하면 되고 npm에서 babel-polyfill을 설치한 다음 webpack 구성 항목에 babel-polyfill을 추가하면 된다는 것입니다.

babel-preset-env의 장점: 🎜
  1. 🎜 targets를 통해 지원되는 구문 버전을 결정하는 것으로 충분합니다. 전환적으로 번역되고 강력한 제어 가능성이 있습니다🎜
  2. 🎜한 번에 전체 패키지를 입력하는 대신 useBuiltIns를 사용하여 babel-polyfill의 주문형 로드를 지원합니다. 🎜
🎜transform-object-rest-spread의 아주 작은 부분이 const a = {name: kitty, age: 7}; const b = { ...a를 지원하는 데 사용됩니다. } 이것은 es7 구문입니다. 🎜🎜syntax-dynamic-import는 요청 시 분할 및 로드 목적을 달성하기 위해 const Home = () => import('../views/home') 구문을 지원합니다. 🎜🎜3. postcss 구성🎜🎜postcss.config.js 파일을 생성하고 구성합니다: 🎜rrreee🎜Summary🎜🎜이 글은 별로 많지 않습니다. eslint, babel, postcss 세 가지만 하면 됩니다. . 🎜🎜관련 권장 사항: 🎜🎜🎜🎜Vue 프런트 엔드 아키텍처 학습(1)🎜🎜🎜🎜🎜

위 내용은 Vue 프론트엔드 아키텍처 학습(2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Spring Data JPA의 아키텍처와 작동 원리는 무엇입니까? Spring Data JPA의 아키텍처와 작동 원리는 무엇입니까? Apr 17, 2024 pm 02:48 PM

SpringDataJPA는 JPA 아키텍처를 기반으로 하며 매핑, ORM 및 트랜잭션 관리를 통해 데이터베이스와 상호 작용합니다. 해당 리포지토리는 CRUD 작업을 제공하고 파생 쿼리는 데이터베이스 액세스를 단순화합니다. 또한 지연 로딩을 사용하여 필요한 경우에만 데이터를 검색하므로 성능이 향상됩니다.

1.3ms는 1.3ms가 걸립니다! Tsinghua의 최신 오픈 소스 모바일 신경망 아키텍처 RepViT 1.3ms는 1.3ms가 걸립니다! Tsinghua의 최신 오픈 소스 모바일 신경망 아키텍처 RepViT Mar 11, 2024 pm 12:07 PM

논문 주소: https://arxiv.org/abs/2307.09283 코드 주소: https://github.com/THU-MIG/RepViTRepViT는 모바일 ViT 아키텍처에서 잘 작동하며 상당한 이점을 보여줍니다. 다음으로, 본 연구의 기여를 살펴보겠습니다. 기사에서는 경량 ViT가 일반적으로 시각적 작업에서 경량 CNN보다 더 나은 성능을 발휘한다고 언급했는데, 그 이유는 주로 모델이 전역 표현을 학습할 수 있는 MSHA(Multi-Head Self-Attention 모듈) 때문입니다. 그러나 경량 ViT와 경량 CNN 간의 아키텍처 차이점은 완전히 연구되지 않았습니다. 본 연구에서 저자는 경량 ViT를 효과적인

PHP와 Vue: 프런트엔드 개발 도구의 완벽한 조합 PHP와 Vue: 프런트엔드 개발 도구의 완벽한 조합 Mar 16, 2024 pm 12:09 PM

PHP와 Vue: 프론트엔드 개발 도구의 완벽한 조합 오늘날 인터넷이 빠르게 발전하는 시대에 프론트엔드 개발은 점점 더 중요해지고 있습니다. 사용자가 웹 사이트 및 애플리케이션 경험에 대한 요구 사항이 점점 더 높아짐에 따라 프런트 엔드 개발자는 보다 효율적이고 유연한 도구를 사용하여 반응형 및 대화형 인터페이스를 만들어야 합니다. 프론트엔드 개발 분야의 두 가지 중요한 기술인 PHP와 Vue.js는 함께 사용하면 완벽한 도구라고 볼 수 있습니다. 이 기사에서는 독자가 이 두 가지를 더 잘 이해하고 적용할 수 있도록 PHP와 Vue의 조합과 자세한 코드 예제를 살펴보겠습니다.

프론트엔드 면접관이 자주 묻는 질문 프론트엔드 면접관이 자주 묻는 질문 Mar 19, 2024 pm 02:24 PM

프론트엔드 개발 인터뷰에서 일반적인 질문은 HTML/CSS 기초, JavaScript 기초, 프레임워크 및 라이브러리, 프로젝트 경험, 알고리즘 및 데이터 구조, 성능 최적화, 크로스 도메인 요청, 프론트엔드 엔지니어링, 디자인 패턴, 새로운 기술 및 트렌드. 면접관 질문은 후보자의 기술적 능력, 프로젝트 경험, 업계 동향에 대한 이해를 평가하기 위해 고안되었습니다. 따라서 지원자는 자신의 능력과 전문성을 입증할 수 있도록 해당 분야에 대한 충분한 준비를 갖추어야 합니다.

golang 프레임워크 아키텍처의 학습 곡선은 얼마나 가파르나요? golang 프레임워크 아키텍처의 학습 곡선은 얼마나 가파르나요? Jun 05, 2024 pm 06:59 PM

Go 프레임워크 아키텍처의 학습 곡선은 Go 언어 및 백엔드 개발에 대한 친숙도와 선택한 프레임워크의 복잡성, 즉 Go 언어의 기본 사항에 대한 올바른 이해에 따라 달라집니다. 백엔드 개발 경험이 있으면 도움이 됩니다. 다양한 복잡성의 프레임워크는 다양한 학습 곡선으로 이어집니다.

워드에서 근수를 입력하는 방법을 함께 알아볼까요? 워드에서 근수를 입력하는 방법을 함께 알아볼까요? Mar 19, 2024 pm 08:52 PM

Word에서 텍스트 내용을 편집할 때 수식 기호를 입력해야 하는 경우가 있습니다. 어떤 사람들은 Word에서 근수를 입력하는 방법을 모르기 때문에 편집자에게 Word에서 근수를 입력하는 방법에 대한 튜토리얼을 친구들과 공유해달라고 요청했습니다. 그것이 내 친구들에게 도움이 되기를 바랍니다. 먼저 컴퓨터에서 Word 소프트웨어를 연 다음 편집하려는 파일을 열고 루트 기호를 삽입해야 하는 위치로 커서를 이동합니다. 아래 그림 예를 참조하세요. 2. [삽입]을 선택한 후, 기호에서 [수식]을 선택하세요. 아래 그림의 빨간색 원과 같이 3. 아래의 [새 수식 삽입]을 선택하세요. 아래 그림의 빨간색 원과 같이 4. [부수]를 선택한 후 해당 부수를 선택합니다. 아래 그림의 빨간색 원에 표시된 대로:

손으로 찢기 Llama3 레이어 1: 처음부터 llama3 구현 손으로 찢기 Llama3 레이어 1: 처음부터 llama3 구현 Jun 01, 2024 pm 05:45 PM

1. Llama3의 아키텍처 이 기사 시리즈에서는 llama3을 처음부터 구현합니다. Llama3의 전체 아키텍처: Llama3의 모델 매개변수 그림: Llama3 모델에서 이러한 매개변수의 실제 값을 살펴보겠습니다. 그림 [1] 컨텍스트 윈도우(context-window) LlaMa 클래스를 인스턴스화할 때 max_seq_len 변수는 context-window를 정의한다. 클래스에는 다른 매개변수도 있지만 이 매개변수는 변환기 모델과 가장 직접적으로 관련됩니다. 여기서 max_seq_len은 8K입니다. 그림 [2] 어휘의 크기와 주의력L

검토! 자율주행 촉진을 위한 기본 모델의 중요한 역할을 종합적으로 요약 검토! 자율주행 촉진을 위한 기본 모델의 중요한 역할을 종합적으로 요약 Jun 11, 2024 pm 05:29 PM

위 작성 및 저자 개인 이해: 최근 딥러닝 기술의 발전과 획기적인 발전으로 대규모 기반 모델(Foundation Models)이 자연어 처리 및 컴퓨터 비전 분야에서 상당한 성과를 거두었습니다. 자율주행에 기본 모델을 적용하는 것도 시나리오에 대한 이해와 추론을 향상시킬 수 있는 큰 발전 전망을 가지고 있습니다. 풍부한 언어와 시각적 데이터에 대한 사전 학습을 통해 기본 모델은 자율주행 시나리오의 다양한 요소를 이해하고 해석하고 추론을 수행할 수 있으며, 의사 결정 및 계획을 추진하기 위한 언어 및 동작 명령을 제공합니다. 기본 모델은 일상적인 운전 및 데이터 수집 중에 발생할 가능성이 없는 롱테일 분포에서 드물게 실행 가능한 기능을 제공하기 위해 운전 시나리오에 대한 이해를 통해 데이터를 보강할 수 있습니다.

See all articles