浏览器支持ES6

Posted linjiu0505

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器支持ES6相关的知识,希望对你有一定的参考价值。

原文:https://blog.csdn.net/u012863664/article/details/72813941

第一步:写了一个导出模块 export.js

var name = "林玖"
var age = 18
var say = function(){
    console.log(‘你好啊!‘)
}

// 批量导出
export {name,age,say}

 

第二步:写了一个导入模块 import.js,导入了export中的属性和方法

import {name,age,say} from ‘./export.js‘
console.log(name)
console.log(age)
say()

然后想在浏览器运行一下,但是不行哦

 

第三步:下载node.js和webpack

下载node.js可以通过官网: http://nodejs.cn/download/ 

然后打开node自带的命令行,输入如下命令全局安装webpack工具

npm install -g webpack

接着通过命令行工具定位到你的工程文件的根目录下, 再次安装webpack到你的工程中

npm install webpack

 

第四步:编写webpack.config.js

var webpack = require("webpack")
var path = require(‘path‘)
module.exports = {
    entry: ‘./import.js‘,
    output:{
        path:path.resolve(__dirname,‘dist‘),
        filename:‘bundle.js‘
    },
    module:{
        loaders:[
            {test:/\.js$/, loader:‘babel-loader‘}
        ]
    }
}

 

第五步:编写html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Es6的导入导出</title>
</head>
<body>
    导入进来了吗?
    <script src="dist/bundle.js"></script>
</body>
</html>

 

第六步:配置.babelrc文件,在工程文件的根目录下创建一个.babelrc文件(注意前面有个点), 这个文件是用来描述我要根据什么样的规则、或者是将JS文件编译成什么版本的文件(比如说ES5). 该文件的内容如下: 

{
    "presets": [
        "es2015"
    ],
    "plugins":[]
}

 

第七步:创建package.json 文件,并安装相应的包

{
    "name": "Moudle",
    "version":"1.0.0",
    "dependencies":{
        
    },
    "devDependencies": {
        "babel":"^6.23.0",
        "babel-cli":"6.24.1",
        "babel-core":"6.26.3",
        "babel-loader": "^7.0.0",
        "babel-preset-es2015":"^6.24.1",
        "webpack": "^2.7.0"
    }
}

安装相应的包,就用通用的方法喽:

npm install (淘宝镜像的用:cnpm install)

 

第八步:使用webpack打包

使用命令行工具定位到项目的根目录下, 然后输入如下指令

webpack

等待一会儿就会发现工程文件的目录下多了一个dist文件夹, 里面放着的就是打包好了的bundle.js文件, 在HTML文件中通过下面的代码引入js文件

<script src="dist/bundle.js"></script>

最后打开F12:会发现打印出了导入的姓名年龄和方法。

 

以上是关于浏览器支持ES6的主要内容,如果未能解决你的问题,请参考以下文章

webengineview支持es6吗

如何让浏览器支持ES6语法,步骤详细到小学生都能看懂!

WebStorm ES6 语法支持设置

babel实践

使用webpack+babel构建ES6语法运行环境

#yyds干货盘点#ES6转换成ES5