ES6

基于webpack的编译ES6的环境配置

Posted on 2018-12-11,7 min read

目前现代浏览器对ES6语法的支持可以达到98%,但是还有部分浏览器不支持ES6,所以就需要将ES6编译为所以浏览器能支持的语法。这时就需要Babel了,作为编写下一代JavaScript的编译器,可以和很多工具配合使用来编译ES6。

在这篇文章下记录一下使用webpack和babel-loader来编译ES6。

一个简单的基于webpack的ES6编译环境。已经上传github仓库。地址

1. 安装Node.js

Node.js官网

2. 创建项目目录并安装webpack

首先创建一个项目文件夹

2.1 初始化

根目录下在终端中输入:

npm init -y
// y是yes的缩写,相当于输入 npm init 一路回车

根目录下会生成一个package.json文件,里面包含着项目的信息。

2.2 安装webpack

别人写的再好,都不如自己看文档,文档写的更详细,webpack官方文档

在终端中输入

npm install webpack webpack-cli --save-dev
// 表示在本地安装webpack

会在根目录生成一个node_modules文件夹。

不推荐全局安装。如果你电脑有多个项目,使用的是不同版本的webpack,在运行的时候,是先去找全局的webpack,版本不一样的话会有问题出现。

推荐使用本地安装,使每个项目都有独立的包,不受全局包的影响,方便项目的移动,复制和打包。

2.3 使用webpack

项目目录

   ES6-Note
   |- /node_modules
   |- package.json
+  |- webpack.config.js		// webpack配置文件
+  |- /src					// 根目录
+    |- /css				// 放CSS文件
+	 |- /js					// 放JS文件
+	   |- index.js		
+    |- /view				// 放HTML文件
+      |- index.html

webpack.config.js

const path = require('path');

module.exports = {
  // 模式,使用开发模式,
  //如果是要上线,使用'production',会对代码进行压缩
  mode: 'development',
  // 入口文件
  entry: './src/js/index.js',
  // 出口
  output: {
    // 打包后的文件名
    filename: 'js/main.js',
    // 文件目录
    path: path.resolve(__dirname, 'dist')
  }
};

更多的configuration说明可以查看官方文档:configuration docs

src/js/index.js

// 添加一段ES6语法的代码
let a = 10;
console.log(a);

src/view/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

package.json

// 在scripts中加入以下代码
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --config webpack.config.js" // 添加这行代码,
},
// 注:json文件中不能有注释

在终端中执行

npm run build

执行这个命令,可以将入口文件打包到出口目录下,就会生成一个dist文件夹,目录结构如下

|- /dist
  |- /js
  |- main.js
|- /src

可以看到main.js文件中包含了index.js的内容

webpack

但是仍然有有两个问题

  • index.html文件并没有被打包到dist中,
  • 打包后的main.js文件仍然是let并没有编译为所有浏览器支持的var

接下来就来解决这两个问题。

3. babel-loader

使用babel-loader可以对JavaScript ES6语法进行编译。

babel-loader

babel官网

3.1 安装

webpack 4.x | babel-loader 8.x | babel 7.x

npm install -D babel-loader @babel/core @babel/preset-env

webpack 4.x | babel-loader 7.x | babel 6.x

npm install -D babel-loader@7 babel-core babel-preset-env

3.2 使用方式

webpack.config.js文件中添加

module.exports = {
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}
}

接着在终端中输入

npm run build

可以看到,在main.js中ES6的语法已经被编译为ES5的语法了。

babel-loader

但是index.html仍然没有被打包到dist中,我们可以手动在dist下创建一个html文件,只有在一个文件的时候可以使用这种方式,但是如果项目很大,文件很多。手动创建的话,就会很繁琐。这时候就需要一个webpack的一个插件了。叫做HtmlWebpackPlugin

4. HtmlWebpackPlugin

这个插件可以将html文件进行打包,具体的使用方式可以看官方文档。

HtmlWebpackPlugin

4.1 安装

npm install --save-dev html-webpack-plugin

4.2 使用方式

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/js/index.js',
    output: {
        filename: 'js/main.js',
        path: path.resolve(__dirname, 'dist')
    },
    //plugins: [new HtmlWebpackPlugin()]//这个是默认,也可以添加一些参数
    plugins: [
        new HtmlWebpackPlugin({
            // 模板
            template: "./src/view/index.html",
            // 输出的地址/dist/...
            filename: "view/index.html",
            // 标题
            title: "ES6-Note",
            inject: true,
        })
    ]
};

在终端中输入

npm run build

会自动在这个目录下生成html文件,dist/view/index.html,而且会自动引入入口文件打包生成的js文件。

HtmlWebapckPlugin

到此,使用webpackbabel-loader编译ES6已经成功了。

可是确有一点问题,就是不能自动编译,每次修改完原js文件需要再次打包。这是我们就需要一个webpack的一个服务了。webpack-dev-server

5. webpack-dev-server

webpack-dev-server提供一个简单的web服务,并且可以进行实时重新加载。

5.1 安装

npm install --save-dev webpack-dev-server

5.2 使用方式

webpack.config.js中添加

module.exports = {
    mode: 'development',
    // 入口
    entry: './src/js/index.js',
    // 出口
    output: {
        filename: 'js/main.js',
        // 文件目录
        path: path.resolve(__dirname, 'dist')
    },
    model: {...},
    plugins: [...],
+    devServer: {
+        contentBase: './dist'
+    },
};

package.json中添加

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
+ "start": "webpack-dev-server"
},

在终端中输入

npm run start

然后再浏览器中输入localhost:8080,就可以创建的本地服务器。

比如将src/js/index.js改为let a = 30。服务器会自动打包并且浏览器会自动刷新,就可以在console中看到10变为了30。

ctrl + c可以关闭服务器。

6. 总结

综上,通过上面的一系列步骤就可以创建一个最基本的ES6的编译环境。还有很多的工具可以来编译ES6。在babel官网中列出了很多的工具。webpack只是其中一种。

babel

下一篇: Google Driver在MAC上登陆失败解决方法