阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      ES6 环境搭建

      目前各大浏览器基本上都支持 ES6 的新特性,其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好,IE7~11 基本不支持 ES6。

      以下是各大浏览器支持情况及开始时间:

      Chrome 58Edge 14Firefox 54Safari 10Opera 55
      2017 年 1 月2016 年 8 月2017 年 3 月2016 年 7 月2018 年 8 月

      实例

      var a = 2;
      {
        let a = 3;
        document.write(a); // 3
      }
      document.write('<br>');
      document.write(a); // 2
      

      浏览器支持的详细的内容可以参考:http://kangax.github.io/compat-table/es6/

      Node.js 是运行在服务端的 JavaScript,它对 ES6 的支持度更高。如果你还不了解 Node.js 可以阅读我们的 Node.js 教程

      在 Node.js 环境中运行 ES6

      $ node
      > let sitename="axihe"
      undefined
      > console.log(sitename)
      axihe
      undefined
      >
      

      使用下面的命令,可以查看 Node 已经实现的 ES6 特性。

      node --v8-options | grep harmony
      

      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 是一个基于流的自动化构建工具,具有易于使用、构建快速、插件高质和易于学习的特点,常用于轻量级的工程中。

      如何使用?

      全局安装 gulp:

      $ npm install --global gulp
      

      在项目中引入依赖:

      $ npm install --save-dev gulp
      

      在项目根目录下创建名为 gulpfile.js 的文件:

      const gulp = require('gulp');
      
      // default 表示一个任务名,为默认执行任务
      gulp.task('default', function() {
        // 放置默认的任务代码
      })
      

      运行 gulp:

      $ gulp
      

      利用 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'));
      })
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录