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

이번 글에서는 이전 글인 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!