NPM前端自动化构建

NPM前端自动化构建

PluginsKers
2021-03-21 / 1 评论 / 142 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年04月27日,已超过52天没有更新,若内容或图片失效,请留言反馈。

为什么构建

  • 一些代码需要编译(CSS,JS), 保证浏览器的兼容性

    • 将 Less 或 Sass 转换成 CSS
    • 将 ES6+ 的新语法转成 ES5
  • 有些代码需要压缩(CSS,JS,HTML,图片等)
    压缩之后的代码体积更小,加载更快,节省带宽
  • 有些代码需要做格式化校验,统一代码风格

npm scripts

npm允许在package.json文件中,使用scripts字段定义脚本

scripts

npm scripts 中任务的执行方式

  • 并行执行 (parallel)
    任务1 & 任务2 任务之间没有先后顺序,同时执行可以提高执行效率
  • 串行执行(series)
    任务1 && 任务2 任务之间有先后顺序,先执行前一个任务,后执行下一个

npm scripts实践

构建样式文件

  • 将 less 转成 css
npm i less -g
lessc input.less output.css
  • 压缩 css 文件
npm i minify -g
minify output.css > output.min.css
"scripts":{
    "style":"lessc styles/main.less styles/main.css &&
    minify styles/main.css > styles/main.min.css"
},

步骤

  • 初始化项目npm init --yes
  • 添加 scripts 命令 ( less + minify )
  • 执行 scripts 命令( npm run 命令 )

构建脚本文件

Babel 插件可以将 ES6+ 新语法转成 ES5

转换命令

  • 单个文件
babel input.js --out-file output.js

或者:

babel input.js -o output.js
  • 整个目录
babel src --out-dir dist

或者:

babel src -d dist

步骤

  • 初始化项目npm init –yes
  • 安装 Babelnpm install -g babel-core babel-cli
  • 安装转码规则npm install -g babel-preset-env
  • 配置转换规则.babelrc
{
    "presets": [
        "env"
    ]
}
  • 在 npm scripts 中添加转换命令babel src -d dist
"scripts": {
    "script": "babel js -d scripts &&
    minify scripts/main.js > scripts/main.min.js"
},
  • 执行转换命令

ESLint

对 JavaScript 代码格式进行检查

  • 初始化项目npm init --yes
  • 安装 ESLintnpm i eslint -g
  • 初始化配置文件eslint --init
  • 检查 JS 代码格式

    • 单个文件eslint path/filename.js
    • 整个目录eslint path/dirname

配置文件.eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
        "indent": [ "error", 2 ],//缩进为2
        "quotes": [ "error", "double" ]//引号必须为双引号
    }
}

StyleLint

对 CSS 代码格式进行检查

  • 初始化项目npm init --yes
  • 安装 StyleLintnpm install --global stylelint
  • 安装检测标准npm install --global stylelint-config- standard
  • 创建配置文件.stylelintrc.json
{
  "extends": "stylelint-config-standard",
  "rules": {
    "block-no-empty": true
  }
}
  • 检查 CSS 代码格式

    • 单个文件stylelint path/filename.css
    • 整个项目stylelint **/*.css

本文转载自:https://juejin.cn/post/6941577667812524068

21

评论 (1)

取消
  1. 头像
    歆宋
    Windows 10 · Google Chrome

    看不懂看不懂~

    回复