前端常用的依赖简介,一定能用得上,部分附带官方文档

npm 包 decomment 使用教程

在开发过程中,我们经常可能需要统一代码风格,让代码看起来比较有条理,其中有些注释看起来很凌乱,去除注释就显得很有必要了。本段将介绍 npm 包 decomment

`decomment` 的npm地址如下:
 [decomment](https://www.npmjs.com/package/decomment?activeTab=readme) 

decomment 是什么?


decomment 是一个由基于 JavaScript 编写的 npm 包,它可以帮助我们快速地去除JSON/JavaScript, CSS/HTML, CPP/H, etc.
从JSON/JavaScript、CSS/HTML、CPP/H等代码中注释。decomment 通过分析源代码,找到注释并删除它们,返回具有相同功能但没有注释的代码。

如何使用 decomment?安装decomment


在项目文件夹,使用终端执行

$ npm i decomment 

如果需要保存的话

$ npm i decomment --save 

使用

const decomment = require('decomment');

const code = 'var t; // comments';

decomment(code); //=> var t;

Lodash

lodash使用教程

先摆上官方文档,官方文档上说的很详细,这里就简单说一下能做什么吧
lodash官方文档


  • Lodash是一个可以提高开发者效率、提高原生JS方法性能的 JavaScript 第三方实用工具库;
  • Lodash特点就是一致性、模块化、高性能。业界赫赫有名,其不需要引入其他第三方依赖,我们在使用的过程中可以直接调用Lodash帮我们封装好的方法;(其模块化特别适用于:创建符合功能的函数、遍历
    array(数组)、object (对象)和 string(字符串)等)
  • Lodash使用了一个简单的 _ 符号,十分简洁。

Prettier

什么是Prettier?

Prettier是npm代码格式化的一种依赖,可以将以下代码格式化:
  • JavaScript (including experimental features)
  • JSX
  • Angular
  • Vue
  • Flow
  • TypeScript
  • CSS, Less, and SCSS
  • HTML
  • Ember/Handlebars
  • JSON
  • GraphQL
  • Markdown, including GFM and MDX v1
  • YAML

先上链接 https://www.prettier.cn/docs/index.html 看英文介绍。

Sass

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

官方中文档

摘录一部分文档说明,详情看文档

1. 特色功能 (Features)

完全兼容 CSS3
在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
通过函数进行颜色值与属性值的运算
提供控制指令 (control directives)等高级功能
自定义输出格式

2. 语法格式 (Syntax)

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特色功能。此外,SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax),以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

另一种也是最早的 Sass 语法格式,被称为缩进格式 (Indented Sass) 通常简称 “Sass”,是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性,很多人认为这样做比 SCSS 更容易阅读,书写也更快速。缩进格式也可以使用 Sass 的全部功能,只是与 SCSS 相比个别地方采取了不同的表达方式,具体请查看 the indented syntax reference。这种格式以 .sass 作为拓展名。

任何一种格式可以直接 导入 (@import) 到另一种格式中使用,或者通过 sass-convert 命令行工具转换成另一种格式:

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

3. 使用 Sass (Using Sass)

Sass 可以通过以下三种方式使用:作为命令行工具;作为独立的 Ruby 模块 (Ruby module);或者作为 Rack-enabled 框架的插件(例如 Ruby on Rails 与 Merb)。无论哪种方式都需要先安装 Sass gem (Windows 系统需要先安装 Ruby):

gem install sass

在命令行中运行 Sass:

sass input.scss output.css

监视单个 Sass 文件,每次修改并保存时自动编译:

sass --watch input.scss:output.css

监视整个文件夹:

sass --watch app/sass:public/stylesheets

更多命令的用法请通过 sass --help 获取帮助。

在 Ruby 中使用 Sass 也非常容易,Sass gem 安装完毕后运行 require “sass” 然后按照下面的方法使用 Sass::Engine:

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n"
  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值