此篇是给准备入手或者刚入手 es6 的盆友准备的，大牛可以无视，个中如有理解不到的地方，还请斧正。

其实在之前本人就看了 es6 里面的一部分内容，当然是阮一峰大神的 ECMAScript 6 入门.

最近闲来无事又来看下，其中 Module 的语法 这章时候，用里面代码跑的时候，理所当然的报错 SyntaxError，因为到目前很多浏览器对 es6 还不是很支持,或者支持的内容不多

不支持，又要写 es6 ，那只能是转码 es5 来跑了，

关于 es6 转码 es5，网上一大堆，良莠不齐。

网上比较推荐的是用 babel 转码,不过对于目前只想学下 es6 的 module 的我来说还是太麻烦了，那不得又要先学个 babel，

虽说技多不压身，不过对目前的我来说是力不从心，而且还得知，即使是 babel 转码之后，也还是得用 webpack 打包才可以用 impost ，

会用 webpack 当然会去试一下 webpack 来打包看看跑 es6 的 module 有没有问题了，一试能跑，那就成了！

下面来就来说下 webpack + es6

首先得安装 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 lang="en">

<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 的朋友第一次弄难免会跑不起来，多试几遍吧！

同理，这不止可以是学习 es6 的 module 这块的知识可以这样，其他的 es6 的知识点，目前浏览器还没有支持的，都可以用 webpack 编译打包成浏览器支持的能跑的 es5 来跑！

es6 module + webpack的更多相关文章

  1. 深入 CommonJs 与 ES6 Module

    目前主流的模块规范 UMD CommonJs es6 module umd 模块(通用模块) (function (global, factory) { typeof exports === 'obj ...

  2. 再次梳理AMD、CMD、CommonJS、ES6 Module的区别

    AMD AMD一开始是CommonJS规范中的一个草案,全称是Asynchronous Module Definition,即异步模块加载机制.后来由该草案的作者以RequireJS实现了AMD规范, ...

  3. 通过ES6 Module看import和require区别

    前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...

  4. 前端模块化IIFE，commonjs，AMD，UMD，ES6 Module规范超详细讲解

    目录 为什么前端需要模块化 什么是模块 是什么IIFE 举个栗子 模块化标准 Commonjs 特征 IIFE中的例子用commonjs实现 AMD和RequireJS 如何定义一个模块 如何在入口文 ...

  5. JavaScript ES6 module 模块

    在使用JavaScript开发大型项目时,模块开发概念是一个必须考虑的问题.其目的就是通过命名空间对各类业务对象进行一定的封装,防止命名冲突. 本篇着重介绍ES6 module中的export和imp ...

  6. visual studio code运行时报错，Cannot find module 'webpack'

    前言 今天运行是visual studio code时,报了一个错误Cannot find module 'webpack' ,网上找了很多方法都没解决.下面一起来看看怎么解决 正文 报错: npm ...

  7. 在 npm 中使用 ES6 module

    node 从 v8.5.0起 支持了 ES6 module. 只需保存文件名为 .mjs ,并通过一个option 可以开启执行,如 node --experimental-modules index ...

  8. 全局安装的 webpack运行时 报错 Error: Cannot find module 'webpack' ......

    全局安装的webpack   安装指令如下 cnpm install wepack -save-dev -g 但是 在我的项目空间运行webpack指令的时候 会报如下错误 为了方便抓取{ Error ...

  9. webpack Error: Cannot find module 'webpack/lib/Chunk' Extract-text-webpack-plugin 分离CSS

    深入浅出webpack 1.5章节使用Extract-text-webpack-plugin分离css 安装插件后打包提示错误 Error: Cannot find module 'webpack/l ...

随机推荐

  1. 在.NET Core 上运行的 WordPress

    在.NET Core 上运行的 WordPress,无需安装PHP既可跨平台运行WordPress. 在Peachpie中实现PHP所需的功能数月后,现在终于可以运行一个真实的应用程序:WordPre ...

  2. github学习（一）

    初识github篇. 一.什么是github:       GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub.       g ...

  3. MySQL Sniffer

    MySQL Sniffer 是360开源的一个基于 MySQL 协议的抓包工具, 能实时抓取客户端端请求,并格式化输出操作语句,操作十分简单.对于问题的定位,操作的审核是个不错的利器. Github地 ...

  4. 算法模板——Trie树

    实现功能——实现对于不同字符串以及之前出现过的字符串的识别,对于单个长度为L的字符串,复杂度为O(L); 代码不难懂,直接上(在识别字符串方面,个人觉得其好处远远大于hash识别——1.理论上都是O( ...

  5. CoreGraphics--画线/圆/矩形

    - (void)drawRect:(CGRect)rect { // Drawing code NSLog(@"drawRect自动调用"); //画图步骤 //获取上下文(/画笔 ...

  6. iOS10构建版本不显示的问题

    iOS10,构建版本问题: 在Xcode中->product->archive,进行相关操作后,upload后没有报错验证也成功的情况下,在开发者账号构建版本号里面迟迟没有显示的原因: i ...

  7. javascript 随机显示指定内容

    今天碰到一个需求,一个页面显示赞助厂商的信息,但是厂商要求排序要随机排,因为是个静态页面不是读取数据库的,所以打算用js来控制 var arr = new Array('张三', '李四', '王五' ...

  8. Mutillidae在kali linux上的安装

    XAMPP:下载地址(https://www.apachefriends.org/download.html) Mutillidae:下载地址(http://sourceforge.net/proje ...

  9. C++—this指针的用法

    this指针抽象比喻 当我们在进入一个房子之后, 可以看见房子里的桌子,椅子. 地板等,但是看不到房子的全貌.对于一个类的实例来说, 你可以看到它的成员 函数. 成员 变量, 但是实例本身呢? thi ...

  10. Markdown轻量级标记语言

    1. Markdown是什么? Markdown是一种轻量级标记语言,它以纯文本形式(易读.易写.易更改)编写文档,并最终以HTML格式发布.Markdown也可以理解为将以MARKDOWN语言编写的 ...