module1_03_自动化构建

自动化构建

  • 为什么要自动化构建,没有自动化构建是不是就不行?

    • 从某种程度上可以这么说

  • 因为一些代码需要编译(css、js),保证浏览器的兼容性

    • 将 Less 或 Sass 转换成 CSS

    • 将 ES6 + 的信誉发转成ES5

    • 代码压缩等

  • 总的来说自动化构建是指将手动构建任务,通过命令自动执行的过程(最终可以压缩到一条命令)

一、自动化构建初体验

1.1 将 less 转换成 css

  • 安装less插件

  • 通过lessc转换

  • 这时候可能会遇到

    • 解决方法:

      • ① win+s 搜索powershell 以管理身份运行

      • ② 使用set-ExecutionPolicy RemoteSigned命令将计算机上的执行策略更改为 RemoteSigned,输入Y确定

1.2 npm script

  • 自动化构建工具有很多种,npm script就是实现自动化构建的最简方式

    • 即使用根据package.json使用script字段定义脚本命令

    • 注意依赖的版本问题

(1)构建方式

  • ① 声明命令

    • 在package中的script 写入 'foo': 'node bar.js'

  • ② 执行命令

    • npm run foo 等同于 node bar.js

(2)执行命令的方式

  • ① 并行执行(parallel):用 & 连接

    • 并行执行在window下是实现不了

  • ② 串行执行(series):用 && 连接

  • 解决 & 在window环境下执行不了的问题

    • 安装 npm-run-all 插件

      • 并行执行:npm-run-all -p 脚本1 脚本2 教本3

        • 简写:run-p

      • 串行执行:npm-run-all -s 脚本1 脚本2 脚本3

        • 简写:run-s

      • 默认执行的是串行

(3)使用babel

  • 转换命令

    • ① 单个文件

      • babel 文件名 --out-file 文件名

      • babel 文件名 -o 文件名

    • ② 整个目录

      • babel 目录名 --out-dir 目录名

      • babel 目录名 -d 目录名

  • 步骤

    • ① 安装babel:npm i -g babel-core babel-cli

    • ② 安装转码规则:npm install -g babel-preset-env

    • ③ 配置转换规则: .babelrc

    • ④ 在 npm scripts 中添加转换命令:babel src -d dist

    • ⑤ 执行转换命令

(4)使用eslint

  • 初始化项目(npm init -y)

  • 安装ESLing(npm i eslint -g)

  • 初始化配置文件(eslint --init)

  • 检查JS代码格式

    • 单个文件(eslint path/filename.js)

    • 整个目录(eslint path/dirname)

 

  • 配置规则

    • 在.eslintrc.json中

      • 比如设置缩进

        • indent里面传一个数组

          • 第一个参数:error / off / warn

          • 第二个参数:设置缩进空格数

    • {
         ...
         "rules": {
             "indent": [ "开 / 关" ]
        }
      }
    •  

(5)styleLint

  • ① 初始化项目:npm init --yes

  • ② 安装StyleLint:npm install --global stylelint

  • ③ 安装检测标准:npm i -g stylelint-config-standard

  • ④ 创建配置文件:.stylelintrc.json

  • ⑤ 检查CSS代码格式

    • 单个文件:stylelint path/filename.css

    • 整个项目:stylelint **/*.css

 

  • 同样也有rules,可以在官网找到

posted @ 2021-03-29 09:42  叻仔猪  阅读(47)  评论(0编辑  收藏  举报