es6 module + webpack
此篇是给准备入手或者刚入手 es6 的盆友准备的，大牛可以无视，个中如有理解不到的地方，还请斧正。
其实在之前本人就看了 es6 里面的一部分内容，当然是阮一峰大神的 ECMAScript 6 入门.
最近闲来无事又来看下，其中 Module 的语法 这章时候，用里面代码跑的时候，理所当然的报错 SyntaxError，因为到目前很多浏览器对 es6 还不是很支持,或者支持的内容不多
不支持，又要写 es6 ，那只能是转码 es5 来跑了，
关于 es6 转码 es5，网上一大堆，良莠不齐。
网上比较推荐的是用 babel 转码,不过对于目前只想学下 es6 的 module 的我来说还是太麻烦了，那不得又要先学个 babel，
虽说技多不压身，不过对目前的我来说是力不从心，而且还得知，即使是 babel 转码之后，也还是得用 webpack 打包才可以用 impost ，
会用 webpack 当然会去试一下 webpack 来打包看看跑 es6 的 module 有没有问题了，一试能跑，那就成了！
首先得安装 Node.js, Node.js 自带了软件包管理器 npm
# 全局环境 $ npm install webpack -g # 通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。 # 进入项目目录 # 确定已经有 package.json，没有就通过 npm init 创建 $ npm install webpack --save-dev
node.js装了,webpack也装了,那下面就来看下怎么使用吧,
共建 四个 文件
# 项目目录/index.html
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
# 项目目录/export.js # 用于规定模块的对外接口 "use strict"; export let name = 'myName'; export let age = 'myAge;
# 项目目录/entry.js
# 用于输入其他模块提供的功能
"use strict";
import {name} from "export"
console.log(name);
# 项目目录/bundle.js # 这个就是空的 js 就好，用 webpack 把代码 打包到 bundle.js
建完上面四个文件，下面就来编译下我们写的 entry.js
在刚才安装 webpack 的命令窗口，跑下面的命令
webpack entry.js bundle.js
如果不能打包，先看有没有定位到当前项目目录
打包成功会显示以下日志
Hash: 6a70e513ab4de3d80b59
Version: webpack 2.3.3
Time: 57ms
Asset Size Chunks Chunk Names
bundle.js 3.21 kB 0 [emitted] main
[0] ./src/e.js 72 bytes {0} [built]
[1] ./entry.js 58 bytes {0} [built]
用浏览器打开 index.html 将会看到 myName
好了，大概就这么个流程！
ps: 每次修改除了 bundle.js 之外的 js (当然是建议不要随意修改 bundle.js)，都要跑一下 webpack entry.js bundle.js 命令才会生效。（也就是他们常说的，但是你听着好像很厉害的 打包）
建议：
上面说的可能会简洁点，不熟悉用黑窗口或者是 不熟悉 npm 、webpack 的朋友第一次弄难免会跑不起来，多试几遍吧！
