Question

如何让浏览器支持ES6中的import和export语法

Answer 1

, Babel默认转换新JavaScript句（syntax）转换新API比Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局象及些定义全局象（比Object.assign）都转码且像importexport两命令现任何浏览器都支持, 同babel其转换浏览器支持ES5, 原于:
babel翻译假设a.js import b.js, a.js进行转码翻译a.js并b.js内容给读取合并进, 想终某js包含 a.jsb.js 代码需要用打包工具
所我讲解何使用webpack工具带importexport语JS文件, 通打包工具所浏览器都支持单JS文件.
1. 载node.jswebpack
Node.js基于Chrome JavaScript运行建立平台 用于便搭建响应速度快、易于扩展网络应用说服务器端JS. webpack打包工具, 依赖于node.js运行.
载node.js通官网:
具体安装步骤网搜, 再赘述. 安装完毕打node.js自带命令行工具
写图片描述
输入命令全局安装webpack工具
npm install -g webpack
接着通命令行工具定位工程文件根目录, 再安装webpack工程
npm install webpack
2. 编写webpack.config.js文件
根目录创建webpack.config.js, 文件用描述些要使用webpack工具进行打包配置信息, 文件内容:
写图片描述
通该文件使用webpack打包工具, webpackimport.js进入, 该文件内容进行编译并打包, 终dist目录打包文件bundle.js, 编译打包程用工具module象loaders声明, 使用babel-loaderJS文件进行编译(包括ES6转换ES5及打包)
3. 创建import.js
创建import.js, 内容:
写图片描述
该文件通ES6语importexport.js引入firstNamelastName变量. 并且通console.log引入两变量打印控制台.
4. 创建export.js
写图片描述
该文件通ES6语export文件几变量作模块输给别文件引用.
5. 创建HTML文件
HTML文件直接webpack终打包bundle.js文件引入即, 通webpack工具已经export.jsimport.js所内容都打包文件bundle.js, HTML文件引入该文件即两JS文件代码都执行.
写图片描述
6. 配置.babelrc文件
工程文件根目录创建.babelrc文件(注意前面点), 文件用描述我要根据规则、或者JS文件编译版本文件(比说ES5). 该文件内容:
写图片描述
7. 载相关依赖模块
式1: 像面, 直接项目根目录创建package.json文件, 并且文件指定devDependencies象, 该象写我编译及打包所要使用依赖模块, 图片webpack用于打包工具, 其babel选项都编译JS文件并打包所需要用依赖模块.
写图片描述
创建package.json文件, 命令行输入
npm install
npm工具根据该文件devDependencies选项载应依赖模块.
式2(推荐): Ctrl+R打运行, 输入cmd打命令行工具, 通命令行工具安装, 直接通npm载依赖模块新稳定版本, 同需要自记些模块版本号
npm install babelnpm install babel-clinpm install babel-corenpm install babel-loadernpm install babel-preset-es2015
8. 使用 webpack打包
使用命令行工具定位项目根目录, 输入指令
webpack
等待发现工程文件目录dist文件夹, 面放着打包bundle.js文件, HTML文件通面代码引入js文件

浏览器运行html文件, 使用F12打发者工具, 看console选项输两行记录Micheal, Jackson