使用webpack打包工具实现浏览器支持es6模块

本文介绍了如何使用webpack打包工具解决浏览器对ES6模块支持不足的问题。内容包括node.js的安装、webpack的全局和本地安装、创建项目文件结构、配置webpack以及执行打包过程。通过webpack,可以将ES6的import和export转换为浏览器可执行的代码。
摘要由CSDN通过智能技术生成

浏览器目前对于es6的支持有限。我们通常会使用babel转码器经es6转为es5实现浏览器的支持。但是babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。而且像import和export这两个命令现在在任何浏览器中都是不支持的, 同时babel也无法将其转换为浏览器支持的ES5, 原因在于:babel只是个翻译,假设a.js 里 import 了 b.js, 对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来, 如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具

一、 node.js的安装,请参考点击打开链接。记住一定要配置环境变量。否则后面会引起很多问题。

二、下列的安装教程基于node 的4.4.1版本。因为node的不同版本会有差异。(之前按照网上的教程安装和使用webpack,总是在命令行出现webpack不是可执行的程序,搞了两天,才发现,原来时node的版本问题。   1.

 1。全局安装webpack 。命令行输入npm install webpack -g

 2.全局安装webpack。     命令行输入npm install webpack-cli -g

       ps:全局安装是为了在命令行中直接使用webpack。

 3.新建项目文件夹test。

4.命令行定位到项目文件夹,命令行输入npm init。初始化npm包,生成package.json

5.本地安装webpack。命令行输入npm install webpack -D

   PS:-D是  --sav-dev的简写

  --save:将保存配置信息至package.json(package.json是nodejs项目配置文件);

  -dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;

       一般保存在dependencies的像这些express/ejs/body-parser等等。

6.本地安装webpac

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值