zoukankan      html  css  js  c++  java
  • 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 有没有问题了,一试能跑,那就成了!

    下面来就来说下 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 来跑!

  • 相关阅读:
    python 下载文件保存到本地
    python 模拟udp客户端发送报文
    Block的底层代码实现
    常见的崩溃问题和类型
    NSTimer打破循环引用的几种方式
    springcloud alibaba Nacos解决OpenFeign调用失败问题
    LRU算法
    常见算法题解
    PHP无文件木马
    c++各种类型的字节数
  • 原文地址:https://www.cnblogs.com/wuxiexy/p/6708945.html
Copyright © 2011-2022 走看看