使用webpack3.x以及babel使浏览器支持es6语法

前言

当前浏览器对于es6语法支持程度还不是很高,我们可以通过webpack打包工具以及babel等转换es6语法,来实现浏览器支持es6语法。当然也有很多工具可以进行转换,比如使用SystemJS都可以,SystemJS有一个缺点就是网速要不好,特别慢,不过他也是很方便的,不用像在webpack中进行配置很多,只需要在script标签中引入,或者是npm安装就可以使用,不需要配置很多,这样可以使我们专注于代码的编写,我这里是使用webpack以及babel进行转换,通过安装了lodash来测试是否转换成功。

实现步骤

  1. 首先我们通过npm init命令来初始化我们的工程。一路y就可以,会生成一个packe.json配置文件;输入下面的命令;
npm init

生成一个配置文件packe.json,内容如下

{
  "name": "es6demo",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.11"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.2.3",
    "babel-loader": "^8.0.4",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.1.2"
  }
}

  1. 安装lodash包,(这里我们只是测试,你可以安装其他的包进行测试)命令如下:
npm install lodash
  1. 安装babel编译器和对应的运行时环境,命令如下
npm install -D @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/polyfill babel-loader

然后新建一个.babelrc文件,进行配置,代码如下:

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "modules": false
        }]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime", {
                "corejs": false,
                "helpers": false,
                "regenerator": false,
                "useESModules": false
            }
        ]
    ],
    "comments": false
}

  1. 安装webpack-cli,命令如下:
npm install webpack-cli --save-dev

也可以是这样,是上面的缩写

npm install webpack-cli -D

然后新建一个webpack.config.js文件,配置信息如下:

const path = require('path');
module.exports = {
    mode: "production",
    entry: ['@babel/polyfill', './src/index.js'],//项目的入口文件
    output: {//编译好的文件路径
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },//webpack是通过模块加载了,下面是定义模块的加载方式
    module: {
        rules: [{
            test: /\.js$/,//那种类型的文件,以js结尾的正则表达式
            include: [
                path.resolve(__dirname, 'src')
            ],
            exclude: /(node_modules|bower_components)/,
            loader: "babel-loader",
        }]
    }
}
  1. 在我们前面生成的package.json文件中,进行配置打包命令:
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --mode development"
  },

整体代码如下:

{
  "name": "es6demo",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --mode development"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.11"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.2.3",
    "babel-loader": "^8.0.4",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.1.2"
  }
}

  1. 新建两个文件夹,dist跟src,
  • src:书写ES6代码的文件夹,写的js程序都放在这里。
  • dist:利用Babel编译成的ES5代码的文件夹,在HTML页面需要引入的时这里的js文件。
  1. 在src文件夹中新建index.js文件,输入下面的代码:
import { uniq } from 'lodash';
const arr = [1, 22, 1, 22, 123, 123, 2255, 22];
console.log(uniq(arr)); /* 用于给数组去重*/
  1. 在终端输入命令:
npm run start

然后就看到我们的dist文件夹中会多出一个main.bundle.js文件,这个就是我们转换并打包的文件,然后在我们的html页面中引入这个文件,打开控制台,会出现我们的结果;如下:
使用webpack3.x以及babel使浏览器支持es6语法_第1张图片

  1. 然后就大功告成了!!!

你可能感兴趣的:(webgis,杂谈,openlayers,arcgis,api,for,javascript,前端)