此篇是给准备入手或者刚入手 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. 规范 : 过程 : login cookies sessionTimeOut

    规范 用户登入网站将得到一个cookies,如果用户有2个account,各别登入admin page 和 client page,是会得到2个cookies. 在reload page时,后台会得到 ...

  2. Rabbitmq集群高可用部署详细

    序言 清风万里的季节,周末本该和亲人朋友一起消遣这烂漫的花花草草,或是懒洋洋的晒个太阳听听风声鸟鸣.无奈工作使然,理想使然,我回到啦公司,敲起啦键盘,撸起啦代码,程序狗的世界一片黯然,一片黯然,愿天下 ...

  3. 用C++11实现C++17的apply（动态数组用作函数参数）

    标题有点错误,apply是用tuple做参数,调用一个函数.这个标题是为了能更好的适配搜索关键字. 动态数组用作函数参数更适合嵌入了脚本环境的C++程序,比如lua或javascript(js). 若 ...

  4. Java中的枚举的治理

    版权声明:本文为博主原创文章,转载请注明出处,欢迎使劲喷 一.为啥用枚举&为啥要对枚举进行治理 1.先来说说为啥用枚举 表中某个字段标识了这条记录的状态,我们往往使用一些code值来标识,例如 ...

  5. js面向对象总结

    原型链 新创建的xiaoming的原型链是: xiaoming ----> Student.prototype ----> Object.prototype ----> null 也 ...

  6. 用ListView实现对数据库的内容显示

    用ListView实现对数据库的内容显示 创建一个触发机制 ---------(作用)将数据读入ArrayList集合中 MyBase base = new MyBase(); SQLiteDatab ...

  7. "the hypervisor is not running" 故障

    在我们日常服务器管理中,常常会遇到创建虚拟机,如果在一台新部署的 Hyper-V 上新建一个 Virtual Machine 时,出现错误信息:"The virtual machine co ...

  8. struct和typedef struct在c语言中的用法

    在c语言中,定义一个结构体要用typedef ,例如下面的示例代码,Stack sq:中的Stack就是struct Stack的别名. 如果没有用到typedef,例如定义 struct test1 ...

  9. BZOJ4403 序列统计—Lucas你好

    绝对是全网写的最详细的一篇题解  题目:序列统计 代码难度:简单 思维难度:提高+-省选 讲下题面:给定三个正整数N.L和R,统计长度在1到N之间,元素大小都在L到R之间的单调不降序列的数量.输出答案 ...

  10. C#实现无边框窗体点击任务栏图标正常最小化和还原

    protected override CreateParams CreateParams{ get { const int WS_MINIMIZEBOX = 0x00020000; // Winuse ...