此篇是给准备入手或者刚入手 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. AR入门系列-02-Vuforia在Unity3d编辑器的使用

    到unity3d的官网下载 地址:https://store.unity.com/?_ga=1.1496562.231401799.1487590551 个人版功能齐全免费,个人开发者基本够用,本案例 ...

  2. C语言中NULL的定义

    用C语言编程不能不说指针,说道指针又不能不提NULL,那么NULL究竟是个什么东西呢? C语言中又定义,定义如下: #undef NULL #if defined(__cplusplus) #defi ...

  3. jquery的ajax提交后，会跳转页面

    今天在写代码的时候,遇到一个很奇怪的问题,一个form表单,用的是ajax的方式提交.结果,在服务器端php中,使用exit(),函数后都不能停止,并且继续跳转到本页.请求如下: 第一个请求中,其实我 ...

  4. Linux的常用基本命令。

    Linux的常用基本命令. 首先启动Linux.启动完毕后需要进行用户的登录,选择登陆的用户不同自然权限也不一样,其中"系统管理员"拥有最高权限. 在启动Linux后屏幕出现如下界 ...

  5. 基于Struts自定义MVC-2

    自定义MVC        数据库:Oracle表:User(id,uname,upwd)自定义Struts框架一.定义Action接口 import javax.servlet.http.*; pu ...

  6. JS入门（二）

    关于运算符: js中判断运算符跟数学的运算符基本差不多,就是大于>,小于<,大于等于>=,小于等于<=,等于==,不等于!=,全等于===:可以看出来,跟我们印象中的判断运算符 ...

  7. 【SSH项目实战三】脚本密钥的批量分发与执行

    [SSH项目实战]脚本密钥的批量分发与执行 标签(空格分隔): Linux服务搭建-陈思齐 ---本教学笔记是本人学习和工作生涯中的摘记整理而成,此为初稿(尚有诸多不完善之处),为原创作品,允许转载, ...

  8. 使用Intellij Idea自定义MVC框架

    ---恢复内容开始--- 今天我学习了自定义一个简单的MVC框架,这个我们首先要知道什么是MVC框架! MVC框架: MVC全名是Model View Controller,是模型(model)-视图 ...

  9. Spring使用注解进行事务的管理

    使用步骤: 步骤一.在spring配置文件中引入<tx:>命名空间 <beans xmlns="http://www.springframework.org/schema/ ...

  10. 浅谈！SQL语句中LEFT JOIN ON WHERE和LEFT JOIN ON AND的区别

    今天的工作学习之路是一个数据库的小知识,当时没有区分出所以然,特此记录分享一下子. 众所周知,数据库的表都是单独存在的,但是当我们进行联合查询(多表查询)时,我们获得数据库返回的值时就好像在一张表里一 ...