做了个前端小教程，新手向，也是自己巩固一下：《使用 Babel + Webpack 编写 ECMAScript 2015 代码》
toloric 2016-09-19 23:20:17 +08:00 2913 次点击这是一个创建于 3379 天前的主题，其中的信息可能已经有所发展或是发生改变。
嘿嘿，小教程起名为 Web 包教不包会
面向萌新们，老鸟无视吧。仓库地址在 https://github.com/hugojing/web-lessons
《使用 Babel + Webpack 编写 ECMAScript 2015 代码》
目标
建立一个 lesson2 项目，在其中编写代码。
在 JS 文件中编写 ECMAScript 2015 代码，最终打包输出 ES5 代码。
当在浏览器中访问 http://localhost:8080 时，输出一个页面，在其中点击按钮、派出一只小精灵。
知识点
- 学习 Node 项目的初始化
- 学习 Babel + Webpack 的使用
- 学习 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.json 的 devDependencies 中。
$ npm install --save-dev babel-core babel-preset-es2015 安装 webpack 和它的 babel-loader 插件，并写入到 package.json 的 devDependencies 中。
$ npm install --save-dev webpack babel-loader 安装好之后，我们就可以在运行代码之前执行 webpack 命令进行打包。
为了方便使用，可以给命令一个别名，写到 package.json 的 scripts 中。
例如：
"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 build 和 npm 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 即可查看效果。
目前尚无回复
Select Language