JavaScript 一些新功能在浏览器上很有可能不能直接用 .. 浏览器实施这些新功能需要花一些时间 .. 不过我们仍然可以使用一些方法,在现在就可以使用浏览器暂时还不支持的 JavaScript 新功能 ..
这里我们需要用到两个主要的工具,Webpack 还有 Babel .. 先打开命令行工具,Windows 可以新建一个 Bash 类型的命令行窗口,mac 用户可以打开系统自带的终端 ..
进入到某个地方 .. 为项目新建一个目录 .. 比如 ninghao-js .. 进入到这个目录的下面 .. cd ninghao-js
先用 npm 或者 yarn 为项目创建一个 package.json 文件 .. yarn init ... 一路回车 ..
安装依赖
再用 npm 或者 yarn 去安装几个工具 .. 安装的时候不指定版本会安装最新的版本 .. 在练习的时候你可以使用跟我安装的一样版本的工具 ..
yarn add webpack@3.7.1 webpack-dev-server@2.9.1 babel-core@6.26.0 babel-loader@7.1.2 babel-preset-env@1.6.0 --dev
配置
完成以后要去做一些配置 .. 先给 webpack 创建一个配置文件 .. 名字是 webpack.config.js .. 先导入 webpack 这个包 .. 名字是 webpack .. module.exports 导出一个对象 .. entry 是入口文件,这里可以设置成 script.js ,你可以把自己写的 JavaScript 代码放在这个入口文件里 ..
output 设置一下输出的文件 .. filename 是文件的名字,可以是 bundle.js .. 在项目里,你可以嵌入这个输出的 js 文件 ..
module 设置一下使用的模块 .. rules 配置一下规则 .. test ,看看文件是不是 js 文件 .. exclude ,排除特定目录下面的 js 文件 .. 这里不需要 node_modules 下面的 js 文件 .
use .. 再添加一个 loader ,使用 babel-loader 去处理一下 js 文件 .. options 可以添加一些选项 .. 里面用一下 presets 设置一下使用的 babel 预设 .. 这里添加一个 env .. 我们最开始安装过 babel-preset-env 这个预设 .. 它可以让 babel 去转换 es2015 之后的 JavaScript 代码 .. 比如可以转换 es2016,es2017 等等 ..
下面再给 babel 添加一个配置文件 .. 名字是 .babelrc .. 配置一下使用的预设,添加一个 env ..
然后打开 package.json ,添加一个脚本命令 .. scripts ... 名字是 start .. 对应的命令用一下 ./node_modules/.bin/webpack-dev-server
这样执行 npm start 或者 yarn start 以后,会用 webpack-dev-server 给项目创建一个本地的服务器 ...
项目文件
再添加一个 js 文件 .. 名字是 script.js .. 在这个文件里,我们可以练习 JavaScript 语言还有它的一些新功能 ..
然后新建一个 html 文件 .. 添加一个基本的 html 文档结构 .. 编辑器里有 emmet 插件,可以输入一个 ! ,再展开这个缩写 ..
在这个文档里嵌入一个脚本文件 .. 这个脚本文件不是 script.js .. 应该是编译之后的 js 文件,我们配置的这个文件的名字是 bundle.js ..
测试
在命令行的下面,执行一下 yarn start ...
这样会用 webpack dev server 给我们的项目在本地创建一个服务器 .. 地址就是这个 localhost:8080.. 打开浏览器 .. 访问一下这个地址 ..
这个服务器会监视项目里的 js 文件的变化 .. 有变化就会自动刷新浏览器 .. 打开浏览器的控制台 .. 然后调整一下窗口 ..
现在我们可以在这个 script.js 文件里面写一些 JavaScript 代码 .. 可以先试一下 ES6 的对象解构功能 .. 创建一个对象 .. 里面有个 greeting ,对应的值是 hello ~ ,还有个 name ,对应的值是 ninghao.net
下面我们用一下对象解构 .. const { greeting, name } = obj .. 这样 obj 这个对象里的 greeting 的值会交给 greeting .. .. name 的值会交给 name ..
console.log 在控制台上输出 greeting 还有 name ..
在控制台会输出 greeting 还有 name 的值 ..