版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cj9551/article/details/85636451
前言
当前浏览器对于es6语法支持程度还不是很高,我们可以通过webpack打包工具以及babel等转换es6语法,来实现浏览器支持es6语法。当然也有很多工具可以进行转换,比如使用SystemJS都可以,SystemJS有一个缺点就是网速要不好,特别慢,不过他也是很方便的,不用像在webpack中进行配置很多,只需要在script标签中引入,或者是npm安装就可以使用,不需要配置很多,这样可以使我们专注于代码的编写,我这里是使用webpack以及babel进行转换,通过安装了lodash来测试是否转换成功。
实现步骤
- 首先我们通过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"
}
}
- 安装lodash包,(这里我们只是测试,你可以安装其他的包进行测试)命令如下:
npm install lodash
- 安装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
}
- 安装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",
}]
}
}
- 在我们前面生成的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"
}
}
- 新建两个文件夹,dist跟src,
- src:书写ES6代码的文件夹,写的js程序都放在这里。
- dist:利用Babel编译成的ES5代码的文件夹,在HTML页面需要引入的时这里的js文件。
- 在src文件夹中新建index.js文件,输入下面的代码:
import { uniq } from 'lodash';
const arr = [1, 22, 1, 22, 123, 123, 2255, 22];
console.log(uniq(arr)); /* 用于给数组去重*/
- 在终端输入命令:
npm run start
然后就看到我们的dist文件夹中会多出一个main.bundle.js文件,这个就是我们转换并打包的文件,然后在我们的html页面中引入这个文件,打开控制台,会出现我们的结果;如下:
- 然后就大功告成了!!!