从零开始做Vue前端架构（2）

YanceyOfficial 发布于2019-06-24 17:56 / 341人阅读

摘要：前言这一篇，我们将接着上篇来完成配置。开发一配置我们采用的方式来创建。对了，前提我们需要全局安装。三配置创建文件，上配置配置总结这篇不多，就做了三件事，。下一篇我们将创建项目文件目录架构从零开始做前端架构项目完整代码前端架构子咻

前言

这一篇，我们将接着上篇来完成配置eslint、babel、postcss。

开发 一、配置eslint

我们采用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的优点：

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

通过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文件，上配置：

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

总结

这篇不多，就做了三件事，eslint、babel、postcss。

下一篇我们将创建项目文件、目录架构 - 从零开始做Vue前端架构（3）

项目完整代码

Vue前端架构-by 子咻

服务器托管私有云从零开始搭建前端数据监控系统从零开始 linux从零开始 python从零开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/11810.html

从零开始做Vue前端架构（3）

摘要：前言这一篇，我们将接着上篇来完成创建项目文件目录架构。总结这篇主要是文件和目录架构的东西，读者务必运行一下完整的项目。因此，下一篇，我们将通过实现本地数据接口模拟从零开始做前端架构项目完整代码前端架构子咻前言这一篇，我们将接着上篇来完成创建项目文件、目录架构。回顾先回顾一下现在项目有哪些东西了： . ├── app │ ├── app.vue │ ├── common ...

dinfer 2019-06-24 17:56 评论0 收藏0
从零开始做Vue前端架构（2）

摘要：前言这一篇，我们将接着上篇来完成配置。开发一配置我们采用的方式来创建。对了，前提我们需要全局安装。三配置创建文件，上配置配置总结这篇不多，就做了三件事，。下一篇我们将创建项目文件目录架构从零开始做前端架构项目完整代码前端架构子咻前言这一篇，我们将接着上篇来完成配置eslint、babel、postcss。开发一、配置eslint 我们采用eslint --init的方式来创建e...

Brenner 2019-08-26 11:34 评论0 收藏0
从零开始做Vue前端架构（1）

摘要：前言想想也已经做过不少架构的项目了，有基于，基于，基于，基于的。好了，介绍完毕，接下来，我就从零开始，一步一步建起前后端完全分离的前端架构了。前言想想也已经做过不少架构的项目了，有基于vue，基于react，基于thinkPHP，基于laravel的。做多了，也就对现有的架构有各种想法，有好的，有坏的，总之，用起来还是不爽。vue-cli虽然可以很快地构建并使用，尤其是vue-c...

frolc 2019-06-24 17:56 评论0 收藏0
从零开始做Vue前端架构（4）

摘要：前言上一篇我们遇到少年，是不是忘了的警告，这一篇我们就来解决这个问题。总结通过实现前后端分离，并且使用来更方便的模拟数据。下一篇，我们创建发布环境下的配置文件，并且看看怎么优化产出的代码的从零开始做前端架构项目完整代码前端架构子咻前言上一篇我们遇到少年，是不是忘了npm run mock?的警告，这一篇我们就来解决这个问题。开发一、安装包安装koa和一系列的包（我们用的是ko...

xuweijian 2019-06-24 17:58 评论0 收藏0
从零开始做Vue前端架构（9）

摘要：那该怎么管理这两个不同的项目呢解决子模块用的的同学肯定一下子就想到子模块的知识了。最后，也希望有想法的同学还有大佬多多留言，给点建议原文地址从零开始做前端架构脚手架参考资料官方文档使用定制前端脚手架别人写的脚手架文件操作相关文档子模块前言相信很多人都用过vue-cli或create-react-app或者类似的脚手架。脚手架方便我们复制，粘贴，或者clone代码库，而且还可以更具用...

Vicky 2019-06-24 18:01 评论0 收藏0