前端js打包工具

访客4年前黑客资讯317
打包工具可以更好的治理html,css,javascript,使用可以锦上添花,不使用也没关系。


1. 前言

1.1 前端

前端三剑客:结构层 html,显示层 css,行为层 javascript。

html好比是屋子的地基,css和 javascript是屋子的建筑材料,这三个部门一起组成个漂亮的屋子。我们不能把他们离开说,某某部门是个屋子,只有三个一起才气组成一个漂亮的屋子 。


1.2 JavaScript 的简介(参考阮一峰的ES6入门简介)

这几年,javascript 生长异常快速,特别是在2015年,更是有一个质的飞跃。
1.2.1 ECMA

说到 JavaScript,就要说下Web尺度的组织协会,ECMA,它是“European Computer Manufactures Association”的缩写,中文称 欧洲计算机制造联合会,1961年确立,旨在确立统一的电脑操作花样尺度--包罗程序语言和输入输出的组织。

1.2.2 JavaScript

2015年,JavaScript 引入许多新的语法糖,而且制订历程当中,另有许多组织和小我私家不停提交新功效。事情很快就变得清晰了,不能能在一个版本内里包罗所有将要引入的功效。

通例的做法是先公布 6.0 版,过一段时间再发 6.1 版,然后是 6.2 版、6.3 版等等 ,这个2015年之前 JavaScript 现在习惯称为ECMAScript5,而之后称为ECMAScript6。

尺度委员会商定后最终决议,尺度在每年的 6 月份正式公布一次,作为昔时的正式版本。接下来的时间,就在这个版本的基础上做改动,直到下一年的 6 月份,草案就自然变成了新一年的版本。这样一来,就不需要以前的版本号了,只要用年份符号就可以了。

因此,ES6 既是一个历史名词,也是一个泛指,寄义是 5.1 版以后的 JavaScript 的下一代尺度,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年公布的正式版本的语言尺度。本书中提到 ES6 的地方,一样平常是指 ES2015 尺度,但有时也是泛指“下一代 JavaScript 语言”。

  • 问题一:关于ECMAScript 和 JavaScript 是什么关系 ?

    回覆:从现在的角度来看,二者是可以交换的。即ECMAScript是JavaScript ,JavaScript 是ECMAScript。

  • 问题二:ECMAScript 6 和 ECMAScript 2015 是什么关系 ?

    回覆:ECMAScript 6泛指下一代 JavaScript 语言,ECMAScript 2015指的是 2015年的 JavaScript 尺度;

总结

// es6 泛指下一代 JavaScript 语言,那时部门人也会以为特指ES2015
ECMAScript6.0  =  ECMAScript2015 = es2015  =  es6(部门人会这么以为)
ECMAScript6.1  =  ECMAScript2016 = es2016  =  es7(部门人会这么以为)
ECMAScript6.2  =  ECMAScript2017 = es2017  =  es8(部门人会这么以为)
1.2.3 浏览器的遭遇

很尴尬的是,JavaScript生长很快,然则浏览器跟不上剧本更新的进度。一方面给出了尺度,一方面却不能直接在浏览器上使用。

这就泛起了 Babel,Babel自称是 JavaScript 编译器,它的作用就是将ES6新语法转成ES5,即现在浏览器可识别的剧本(基本现在是针对老版 IE 内核)。

然则使用 Babel 编译也有缺陷,那就是每一次保留,都需要手动的使用命令行编译,而且编译历程中还需要相关联的包配合使用,很繁琐。以是,打包工具就泛起了,它可以辅助做这些繁琐的事情。


2. 打包工具

2.1 先容

仅先容 4 款主流的打包工具:grunt , gulp,webpack, rollup,以公布时间为顺序。

  1. Grunt:最老牌的打包工具,它运用设置的头脑来写打包剧本,一切皆设置,以是会泛起比较多的设置项,诸如option,src,dest等等。而且差别的插件可能会有自己扩展字段,认知成本高,运用的时刻需要明了种种插件的设置规则。
  2. Gulp:用代码方式来写打包剧本,而且代码接纳流式的写法,只抽象出了gulp.src, gulp.pipe, gulp.dest, gulp.watch 接口,运用相当简朴。更易于学习和使用,使用gulp的代码量能比grunt少一半左右。
  3. Webpack: 是模块化治理工具和打包工具。通过 loader 的转换,任何形式的资源都可以视作模块,好比 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片等。它可以将许多松散的模块根据依赖和规则打包成相符生产环境部署的前端资源。还可以将按需加载的模块举行代码离开,等到实际需要的时刻再异步加载。它定位是模块打包器,而 Gulp/Grunt 属于构建工具。Webpack 可以取代 Gulp/Grunt 的一些功效,但不是一个职能的工具,可以配合使用。
  4. Rollup:下一代 ES6 模块化工具,更大的亮点是行使 ES6 模块设计,行使 tree-shaking天生更简练、更简朴的代码。一样平常而言,对于应用使用 Webpack,对于类库使用 Rollup;需要代码拆分(Code Splitting),或者许多静态资源需要处置,再或者构建的项目需要引入许多 Common *** 模块的依赖时,使用 webpack。代码库是基于 ES6 模块,而且希望代码能够被其他人直接使用,使用 Rollup。


2.2 使用总结

 Grunt:MPA,老牌打包工具,基于文件为前言(运行慢,零星的剧本文件一当多起来就受到影响

 Gulp:MPA,易学,基于 nodejs 的 steam 流打包
 Webpack:SPA,现在最壮大的打包工具,然则过于臃肿,若何单纯打包js不推荐

 Roleup:MPA,tree-shaking特征(针对es6,按需打包,多余的不要,现在(2018,vuex,react主流使用)


2.3 若何选择

若是你一个都不熟悉的话,那么我直接推荐 webpack,官方文档异常详细,更新频率很高。而且在其他的打包工具在处置非网页文件(好比svg, png, vue等)基本照样需要借助它来实现。最要害现在的脚手架主流依旧是它。

若是在处置文件需要关注前端三剑客的话,那么 grunt 和 gulp 会更好点,这两者我直接推荐 gulp,除非你已经很熟悉 grunt了。

若是你加倍在意剧本代码的简练精炼,那么可以使用rollup

若是你还要加倍精炼一点,这里新出来一个新的打包工具,免插件式parcel


3. 小我私家打包设置

在打包上,我小我私家注重的是设置从简朴到庞大,以是我离开使用。

css 打包选择了gulp,2个义务,3个插件,有一个插件是为了编译scss,若是直接使用css,那么这个插件也可以去除。

// 义务一:编译
gulp.task('compile', function () {
  return gulp.src('src/scss/*.scss')
    .pipe(sass({outputStyle: 'expanded'})) // 插件一:编译scss
    .on('error', showError)
    .pipe(autoprefixer({ // 插件二:自动添加浏览器前缀
      browsers: ['> 1%', 'last 4 versions'],
      cascade: false,
      remove: true
    }))
    .pipe(cleanCss({ // 插件三:压缩样式
      compatibility: 'ie8',
      format: 'keep-breaks'
    }))
    .pipe(gulp.dest('../dist/css'));
})
// 义务二:考察
gulp.task('watch', function(){
  gulp.watch('src/scss/*.scss', ['compile'])
})

ECMAScript 小我私家现在基本使用es6,以是在打包剧本上我选择了rollup,只提取有用的代码,设置上参考react官方设置文档

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import { eslint } from 'rollup-plugin-eslint';
import { uglify } from 'rollup-plugin-uglify';

const env = process.env.NODE_ENV;
console.log('当前环境:%s', env);

const configs = [
  {
    input: 'src/js/index.js',
    output: {
      file: 'dist/js/index.js',
      format: 'umd',
      name: 'atom',
      banner,
      sourcemap: true
    }
  }
]

const plugins = [
  eslint({ // 检测js代码语法花样
    formatter: 'codeframe',
    include: [
      'src/js/**/*.js'
    ]
  }),
  resolve({ // 提取所依赖的代码
    jsnext: true,
    main: true,
    browser: true,
    module: true
  }),
  babel({ // 编译es6 -> es5
    exclude: 'node_modules/**' // 只编译我们的源代码
  }),
  commonjs() // 将commonjs 转成 es6 
]

export default configs.map(v => {
  v.plugins = plugins

  if (env === 'development') {
    v.watch = { // 监听剧本的转变
      include: 'src/js/**',
      exclude: ['node_modules/**']
    }
  }

  if (env === 'production') {
    v.plugins.push(
      uglify({ // 压缩剧本
        compress: {
          pure_getters: true,
          unsafe: true,
          unsafe_comps: true,
          warnings: false
        }
      })
    )
  }

  return v
});

html 小我私家不做任何处置,可以在上线压缩削减文件的体积,压缩直接使用gulp

相关文章

扣扣黑客(下载黑客软件)

扣扣黑客(下载黑客软件)

本文目录一览: 1、我的QQ让黑客盗了 我申诉回来他 又盗了 怎么办? 2、手机QQ被黑客入侵怎么办 3、扣扣号被盗了怎么办,对方是黑客,要我给钱 4、黑客利用QQ盗取我的隐私视频,盗取我...

千万不要找黑客当男朋友(黑客帝国男主角)

千万不要找黑客当男朋友(黑客帝国男主角)

《黑客帝国》男主尼奥饰演者是基努·里维斯。基努·里维斯是澳大利亚知名演员,1981年,基努·里维斯由于拍攝可口可乐公司广告宣传而宣布成名。以后出演了众多影视剧的拍攝。经典作品有《生死时速》,《太极侠》...

黑客怎么样入侵手机(黑客入侵手机怎么解决)

黑客怎么样入侵手机(黑客入侵手机怎么解决)

本文导读目录: 1、能通过手机号入侵手机吗? 2、黑客是怎样入侵手机的 3、看黑客如何侵入你的手机 4、黑客怎么利用wifi盗取手机信息?应该如何防范? 5、黑客是怎样入侵别人的手机或...

一键盗qq密码手机版软件(一键盗密码手机版软件有哪些)

一键盗qq密码手机版软件(一键盗密码手机版软件有哪些)

本文目录一览: 1、现在手机软件这么多,请问,QQ防盗号用哪个软件比较好? 2、盗号神器qq密码手机版是什么? 3、怎么盗自己的qq密码教程手机 现在手机软件这么多,请问,QQ防盗号用哪个软...

反序列化漏洞-PHP

序列化是将对象的状态信息转换为可以存储或传输的形式的过程。在序列化期间,对象将其当前状态写入到临时或持久性存储区。以后,可以通过从存储区中读取或反序列化对象的状态,重新创建该对象。[将状态信息保存为字...

蜘蛛池让你的网站快速被百度收录

新网站如何让网站内页,收录加快?接下来最蜘蛛池小编就跟大家分享下新站让网站内页收录加快的方法,一起来看看吧! 1、使用专业的蜘蛛池平台 最蜘蛛池 三十五台智能服务器,每天超千万蜘蛛爬行,让您的链接收...