前端工具链 copy

layout: post read_time: true show_date: true title: ‘前端工具链’ date: 2021-07-19 img: posts/20210705/4.jpg tags: [cli] category: opinion author: 随步 description: ‘前端工具链’ —

静态类型语言

TS

代码风格检查 linter

多人协作的弊端，风格各异，维护和扩展的困难 eslint 它解决的问题是：检查代码质量、代码风格

module.exports = {
    "extends": [
        'eslint:recommanded',
        '直接使用比较出名的组织出的规则'
    ],
    rules: {
        'semi': ['error', 'never']
    }
}

Prettier 它的作用是：作eslint的辅助工具，优势是更少的配置项，优雅的代码风格 它的原理： 禁用所有和Prettier冲突的Eslint的代码格式规则 将所有Prettier的规则和修改导入Eslint中，在Eslint统一的显示这些错误

包管理

npm yarn

转译器

非js（例如coffeejs）不同版本的js转译成平台要求的等价兼容代码 babel

开发服务器

热更新HMR

打包工具 Bundler

将源代码转换成符合生产环境的代码 webpack-loader，plugin，大而全的功能 Rollup- 专注于打包输出各种格式 Parcel-零配置

任务管理工具

自动执行项目所需的重复任务 CSS预处理 优化图片 合并压缩js 文件处理 监听文件变化

Gulp流式管道写法、webpack插件的方式

SuiBu

Engineer