webpack实战6之js代码处理

注意：

本文假设你有webpack 的基础认识。

本文的目的是将es6代码转成es5，和使用jslint检查

项目目录

1.jpg

开始实战

创建一个目录webpack-demo6,并安装wbepack。

  mkdir webpack-demo6 && cd webpack-demo6
  npm init -y
  npm install --save-dev webpack

安装 jshint,jshint-loader,babel-core,babel-loader,babel-preset-env

npm install --save-dev jshint jshint-loader babel-core babel-loader babel-preset-env

新建index.html文件

新建index.js文件

  class Person {
    constructor(age, name) {
      this.age = age;
      this.name = name;
    }
    dance() {
        document.body.innerHTML = 'I Can Dance!'
    }
}

let p = new Person(25, 'noshower');
p.dance();

这里我们使用es6的构造函数写法。然后使用babel转成es5语法。

新建.jshintrc文件

  {
// 例如
"camelcase": true,
//jslint的错误信息在默认情况下会显示为warning（警告）类信息
//将emitErrors参数设置为true可使错误显示为error（错误）类信息
"emitErrors": false,
//jshint默认情况下不会打断webpack编译
//如果你想在jshint出现错误时，立刻停止编译
//请设置failOnHint参数为true
"failOnHint": false,
// 告诉jshint，我在使用es6语法
"esversion": 6
}

.jshintrc 是jshint的配置文件，不需要指定，jshint会自动引用它。

新建webpack.config.js文件

const path = require('path');

module.exports = {
entry: './index.js',
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
},
module: {
    rules: [
        {
            test: /\.js$/,
            enforce: 'pre',
            exclude: /node_modules/,
            use: [
                {
                    loader: 'jshint-loader'
                }
            ]
        }, {
            test: /\.js$/,
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            ],
            exclude: /node_modules/
        }
    ]
}
}

进行打包

webpack --config webpack.config.js

结果显示：

1.jpg

jshint告诉我们 index.js文件第7行末尾少了个分号。

于是，我们将分号加上，重新打包。结果显示：

1.jpg

现在结果正常了。

然后，我们打开bundle.js文件，我们可以看到，es6语法被转成了es5语法了。