1.2 ES6 环境搭建

说明

作者： King

分类：计算机

日期：2021年7月13日

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 安装可以参考 Node.js 安装配置。

在 Node.js 环境中运行 ES6

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

使用下面的命令，可以查看 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"]          ]      }    ]  }}