前端js打包工具

更新日期: 2019-06-10阅读: 12.5k标签: 打包
打包工具可以更好的管理htmlcss,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),或者很多静态资源需要处理,再或者构建的项目需要引入很多 CommonJS 模块的依赖时,使用 webpack。代码库是基于 ES6 模块,而且希望代码能够被其他人直接使用,使用 Rollup。


2.2 使用总结

point_right Grunt:MPA,老牌打包工具,基于文件为媒介(运行慢,零散的脚本文件一当多起来就受到影响

point_right Gulp:MPA,易学,基于 nodejs 的 steam 流打包
point_right Webpack:SPA,目前最强大的打包工具,但是过于臃肿,如何单纯打包js不推荐

point_right 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

// 任务一
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src('src/html/*.html')
        .pipe(htmlmin(options)) // 使用gulp-htmlmin插件
        .pipe(gulp.dest('dist/html'));
});


来自:https://segmentfault.com/a/1190000019434666


链接: https://www.fly63.com/article/detial/3628

用Cordova打包Vue项目

现在的打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下。下面说说怎么使用cordova打包Vue项目

Webpack 打包含动态加载的类库

在编写库的时候,我们有时候会希望按需加载某些依赖,例如如果代码的运行环境不支持某些功能的话,就加载相关的Polyfill。webpack作为当前最流行的打包工具,早已支持动态加载的功能了。本文将讨论一种用webpack打包含动态加载的类库的方法。

webpack如何编译ES6打包

随着ES的普及我们越来越多的开始使用ES6的语法了,当然也随着mvvm框架的流行少不了js模块化,那js模块化又有那些呢?在很早的时候大家都用的命名空间,现在也有人用(库名.类别名.方法名)

解决webpack打包速度慢的解决办法

webpack在打包的时候第一次总是会做很长的准备工作,包括加载插件之类的。在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下,这种方式最后让很多人崩溃了觉得webpack一点都不好用

vue实现分环境打包步骤

在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换

webpack4 打包静态资源

准备一个空文件夹,然后执行下列命令:然后创建一个 dist 目录,并在里面创建一个 indedx.html:接着创建一个 src 目录,在里面创建一个 lib 文件夹,创建一个 until.js:再创建 components 文件夹,再写入几个 js:

vue-cli3.0中自定css、js和图片的打包路径

我们有时候因为一些特殊需求,可能需要将js/css/img等资源文件都打包到根路径下,但vue-cli3.0的路径配置中仅有assetsDir配置项能够配置所有的静态文件所在的文件夹,并不能针对css/js/img等资源文件分别来做设置,那么请看我如何尝试的吧!

Webpack安装配置及打包详细过程

前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有模块化方案让你无痛接入项目

webpack动态加载打包chunk命名

最近,遇到复杂h5页面开发,为了优化H5首屏加载速度,想到使用按需加载的方式,减少首次加载的JavaScript文件体积,于是将处理过程在这里记录一下,涉及到的主要是以下三点:

Webpack 打包太慢? 试试 Dllplugin

webpack在build包的时候,有时候会遇到打包时间很长的问题,这里提供了一个解决方案,让打包如丝般顺滑~在用 Webpack 打包的时候,对于一些不经常更新的第三方库

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!