精华 仿照唐少做了个前端小教程,新手向,也是自己巩固一下《使用 Babel + Webpack 编写 ECMAScript 2015 代码》
发布于 3 年前 作者 HugoJing 7715 次浏览 来自 分享

嘿嘿😝,小教程起名为 Web 包教不包会 (希望唐少不要打我😄)

面向萌新们,老鸟无视吧。仓库地址在 https://github.com/hugojing/web-lessons

《使用 Babel + Webpack 编写 ECMAScript 2015 代码》

目标

建立一个 lesson2 项目,在其中编写代码。

在 JS 文件中编写 ECMAScript 2015 代码,最终打包输出 ES5 代码。

当在浏览器中访问 http://localhost:8080 时,输出一个页面,在其中点击按钮、派出一只小精灵。

知识点

  1. 学习 Node 项目的初始化
  2. 学习 Babel + Webpack 的使用
  3. 学习 ES2015 的部分语法

课程内容

使用 Babel 的原因

可能你注意到了,上一节课我们编写的是 ES2015 代码,虽然在 Chrome 中可以运行,但是在其他浏览器上就不一定了。这就是我们使用 Babel 的原因所在。

有了 Babel,ES2015 代码就可以转译为各个浏览器普遍能运行的 ES5 代码。

但是 Babel 只有转译功能,对于 ES2015 modules,它是默认转译为 CommonJS 的(require 关键字)。

浏览器无法直接加载 CommonJS 模块,因此还需要 Webpack 来实现 JS 模块加载功能。

注意,Webpack 是一个前端模块加载器 + 打包工具。咱们此次只用到它前端模块加载功能之一 —— JS 模块加载。你当然可以选择其他 JS 模块加载器,比如 Browserify。

将它们安装到 Node 项目中,首先需要初始化一个 Node 项目。

初始化一个 Node 项目

执行初始化命令,

$ npm init

填入必要信息,完成。

完成之后项目中会多出一个 package.json 文件,即为初始化成功。

安装 Babel 和 Wabpack 到项目

安装 babel-core 和它的 babel-preset-es2015 插件,并写入到 package.jsondevDependencies 中。

$ npm install --save-dev babel-core babel-preset-es2015

安装 webpack 和它的 babel-loader 插件,并写入到 package.jsondevDependencies 中。

$ npm install --save-dev webpack babel-loader

安装好之后,我们就可以在运行代码之前执行 webpack 命令进行打包。

为了方便使用,可以给命令一个别名,写到 package.jsonscripts 中。

例如:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --progress --hide-modules"
}

小插曲:还记得前几节的小工具 http-server 吗?也可安装到项目中来,抛弃原本在全局使用的方式。

安装:

$ npm install --save-dev http-server

此后项目中可以使用 http-server [输出目录] 命令来启动服务器。

我们同样写入 npm scripts:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --progress --hide-modules",
    "serve": "http-server dist"
}

这样,之后就可以使用 npm run buildnpm run serve 命令了,更加语义化。

编写 Babel 和 Webpack 的配置文件

新建一个文件:.babelrc, 编写 Babel 的配置文件:

详见本目录下 .babelrc 文件

新建一个文件:webpack.config.js, 编写 Webpack 的配置文件:

详见本目录下 webpack.config.js 文件

本节不铺开讲配置文件

用 HTML 写内容

新建 /dist/src 目录。

新建一个文件:/dist/index.html,编写 HTML 文档:

<!DOCTYPE html>
<html>
  <head>
    <title>ES2015 宠物小精灵</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <button class="btn">决定就是你了!</button>
    <script src="./main.js" charset="utf-8"></script>
  </body>
</html>

用 CSS 写样式

新建一个文件:/dist/style.css,编写 CSS 文件:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: whitesmoke;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.btn {
    outline: none;
    border: none;
    border-radius: 2px;
    padding: 10px;
    color: #fff;
    background: indianred;
}

用 JS 写行为

新建一个文件:/src/main.js,编写 JS 文件:

主要内容就是监听刚刚在 HTML 中写的那个按钮,当点击时就随机给出一只小精灵。

因为我们可以毫无顾忌的写 ES2015 代码了,所以直接引入第三方模块。

首先需要安装:

$ npm install --save pokemon-gif

然后开写:

import pokemonGif from 'pokemon-gif'

const btn = document.getElementsByClassName('btn')[0]

btn.addEventListener('click', () => {
    console.log('Clicked!')
    const randomId = Math.ceil(Math.random() * 721)
    const gifUrl = pokemonGif(randomId)
    console.log(gifUrl)
    if (gifUrl) {
        const img = document.createElement('img')
        img.src = gifUrl
        const body = document.getElementsByTagName('body')[0]
        body.removeChild(btn)
        body.appendChild(img)
    }
})

打包,启动服务

打包 :

$ npm run build

启动服务:

$ npm run serve

打开浏览器输入网址 http://localhost:8080 即可查看效果。

24 回复

mark

来自酷炫的 CNodeMD

666 <br><br>来自<a href=“https://lzxb.github.io/vue-cnode/” target="_blank">vue-cnode手机版</a>

对于新手而言,重点之一在webpack,正好你不讲…这就尴尬了!

@DevinXian 😯 这铺开讲完就来不及写咱们的小网页了吧。。。先了解 JS 模块加载,之后再说其他“模块”。话说本来想用 browserify的,没想到的跟babel 搭起来坑好多。。

赞~ 自豪地采用 CNodeJS ionic

所以楼主打算下一节讲咯

@SilenceDN

内容笼统,课程重点随心所欲

😁

webpack才是重点哟

如果能系统的讲一下webpack就好了

就三课啊?列个提纲看看哈

@alsotang 好主意!~晚上回去列一下,目前想到的就是下一步说下 normalize.css、 modernizr,然后上 DOM 操作,这样

适合新手学习

厉害了呦我的 Hugo,跟随你的脚步学习一下火到爆炸的前端 😄

@DuanPengfei 噫,现在火的都是各种 “用 Web 开发方式写 native” 的方案,前端快哭了。。

@HugoJing 昨天看到黄玄写了一篇文章也是对 web 方式写 native 持反对观点,说的挺好。

诶,貌似在我博客的评论列表里看过你诶, 大神好厉害 orz

@geemo 你可别说了,我在你博客里提醒你的徽章没显示你还不信。。。

@HugoJing 没有不信,我照你说的做啦,然而还是显示。。。

@geemo 哈哈看了你的博客,你才是大神。

重点是webpack啊,不过教程却一带而过。

回到顶部