此篇是给准备入手或者刚入手 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. Ghostscript.Net Pdf 转 Image

    需求: 项目中需要实现PPT转Image的功能,之前项目中用的是使用Office COM组件实现的功能,通过.NET与Office COM组件的互操作(Interop)来操作Office文档 但是在生 ...

  2. PHP学习笔记之PDO

    1. 何为PDO? PDO(PHP数据对象) 是一个轻量级的.具有兼容接口的PHP数据连接拓展,是一个PHP官方的PECL库,随PHP 5.1发布,需要PHP 5的面向对象支持,因而在更早的版本上无法 ...

  3. 【2017-2-17】C#基础 - 定义变量，输入输出

    1.初学C#. C#是专门为.NET的应用而开发的语言,他吸收了C++.Visual Basic.Delphi.Java等语言的优点,提高了程序开发的效率. 2.Visual Studio.NET的集 ...

  4. error LNK2001: unresolved external symbol __beginthreadex

    解决方法: project->settings->C++>category->code generation->Use runtime library选Debug Mul ...

  5. ForEach 循环

    在C 标签里面 有个foreach 标签,这个标签是专门来做循环的标签: <c:forEach items="${wekList}"  var="list" ...

  6. Repcached实现memcached复制

    1.介绍     repcached是日本人开发的实现memcached复制功能,它是一个单 master单 slave的方案,但它的master/slave都是可读写的,而且可以相互同步,如果 ma ...

  7. require和include的区别及自动加载的定义

    //引入文件//require与include的区别://include主要是指引入,如果引入的文件出现错误,则程序停止运行//require主要是指请求,如果请求的文件出现错误,则程序不受影响,继续 ...

  8. laravel 简单的上传图片

     /** * laravel 简单的上传图片* @param Request $request* @return View*/public function upload(Request $reque ...

  9. 使用Git将本地仓库与GitHub远程仓库相关联

    这篇文章详细讲解了如何生成SSH,并链接到GitHub,123..... 1.如果你的GitHub里面没有仓库,就自己生成一个,如图所示 2.如果你有自己仓库,想在电脑本地新建一个,你需要将GitHu ...

  10. Android在未来对 Java 8 特性的支持

    在谷歌, 我们总是努力做正确的事. 这意味着有时候我们会调整自己的计划. 我们深切地知道开发者社区是多少地关注 Android 能够对 Java 8 良好的支持, 并且我们正在改变自己对 Java 8 ...