淘宝客网站api,网站建设万首先金手指14,新浪舆情通官网,企业融资查询目录 简介
环境搭建
可以在 Node.js 环境中运行 ES6
webpack
入口 (entry)
loader
插件 (plugins)
利用 webpack 搭建应用
gulp
如何使用#xff1f; 简介
ES6#xff0c; 全称 ECMAScript 6.0 #xff0c;是 JavaScript 的下一个版本标准#xff0c;2015.06 发版…目录 简介
环境搭建
可以在 Node.js 环境中运行 ES6
webpack
入口 (entry)
loader
插件 (plugins)
利用 webpack 搭建应用
gulp
如何使用 简介
ES6 全称 ECMAScript 6.0 是 JavaScript 的下一个版本标准2015.06 发版。ES6 主要是为了解决 ES5 的先天不足比如 JavaScript 里并没有类的概念但是目前浏览器的 JavaScript 是 ES5 版本大多数高版本的浏览器也支持 ES6不过只实现了 ES6 的部分特性和功能。
ECMAScript 6 目前基本成为业界标准它的普及速度比 ES5 要快很多主要原因是现代浏览器对 ES6 的支持相当迅速尤其是 Chrome 和 Firefox 浏览器已经支持 ES6 中绝大多数的特性。
环境搭建
可以在 Node.js 环境中运行 ES6
Node.js 是运行在服务端的 JavaScript它对 ES6 的支持度更高。
webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。当 webpack 处理应用程序时它会递归地构建一个依赖关系图 (dependency graph) 其中包含应用程序需要的每个模块然后将所有这些模块打包成一个或多个 bundle 。
webpack 主要有四个核心概念:
入口 (entry)
输出 (output)
loader
插件 (plugins)
入口 (entry)
入口会指示 webpack 应该使用哪个模块来作为构建其内部依赖图的开始。进入入口起点后webpack 会找出有哪些模块和库是入口起点直接和间接依赖的。在 webpack 中入口有多种方式来定义
示例
单个入口简写语法:
const config {entry: ./src/main.js
}
对象语法:
const config {app: ./src/main.js,vendors: ./src/vendors.js
}
输出 (output):
output 属性会告诉 webpack 在哪里输出它创建的 bundles 以及如何命名这些文件默认值为 ./dist:
const config {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist)}
}
loader
loader 让 webpack 可以去处理那些非 JavaScript 文件 webpack 自身只理解 JavaScript 。loader 可以将所有类型的文件转换为 webpack 能够有效处理的模块例如开发的时候使用 ES6 通过 loader 将 ES6 的语法转为 ES5
配置
const config {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist)},module: {rules: [{test: /\.js$/,exclude: /node_modules/,loader: babel-loader,options: [presets: [env]]}]}
}
插件 (plugins)
loader 被用于转换某些类型的模块而插件则可以做更多的事情。包括打包优化、压缩、定义环境变量等等。插件的功能强大是 webpack 扩展非常重要的利器可以用来处理各种各样的任务。使用一个插件也非常容易只需要 require() 然后添加到 plugins 数组中。
// 通过 npm 安装
const HtmlWebpackPlugin require(html-webpack-plugin);
// 用于访问内置插件
const webpack require(webpack); const config {module: {rules: [{test: /\.js$/,exclude: /node_modules/,loader: babel-loader}]},plugins: [new HtmlWebpackPlugin({template: ./src/index.html})]
};
利用 webpack 搭建应用
webpack.config.js
const path require(path);module.exports {mode: development, // production | development// 选择 development 为开发模式 production 为生产模式entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist)},module: {rules: [{test: /\.js$/,exclude: /node_modules/,loader: babel-loader,options: [presets: [env]]}]},plugins: [...]
}
示例构建了一个最简单的配置webpack 会从入口 main.js 文件进行构建通过 loader 进行js转换输出一个为 bundle.js 的文件至此一整个过程就构建完成。
gulp
gulp 是一个基于流的自动化构建工具具有易于使用、构建快速、插件高质和易于学习的特点常用于轻量级的工程中。
如何使用
在开始之前 需要确保已经安装了 Node.js和npm
全局安装 gulp:
$ npm install --global gulp
在项目中引入依赖:
$ npm install --save-dev gulp
在项目根目录下创建名为 gulpfile.js 的文件:
const gulp require(gulp);// default 表示一个任务名为默认执行任务
gulp.task(default, function() {// 放置默认的任务代码
})
在项目文件夹下输入命令gulp时, 就是触发这个default任务, 因此, 我们定义多个自定义事件, 这样在输入gulp时, 就可以直接将我们写的命令也一起触发.
示例
const gulp require(gulp);
const uglify require(gulp-uglify); gulp.task(default, function() {gulp.src(./src/main.js).pipe(uglify()).pipe(gulp.dest(./dist));
})
gulp也有很多常用的插件在这里就不多讲了大家需要的时候可以搜索下载。
找到了一位大佬的博客上面讲了很多gulp常用的插件以及gulp更详细的使用 http://t.csdnimg.cn/xeWbg
