es6环境配置

一. es6简介

es6就是es5的升级版,es5是js的通用标准,绝大多数浏览器都支持其语法,但es6不同,如果es6的代码需要在浏览器上运行,那就先将es6转化为es5。如果在es6中使用模块化机制,需要将每个模块合并为总模块再来使用。

二. es6的模块化机制
  1. 定义模块

    $ mkdir app01
    $ cd app01
    $ npm init -y

    初始化完毕后,当前项目中会出现package.json文件,该文件是项目的核心文件,记录了项目的信息以及依赖信息,以及脚本信息
    在app01(一个项目的名称)项目中,任何js都可以理解为一个模块。没一个模块内部,也就是每个js都可以访问一个对象(module),该对象有一个属性exports属性是对外的接口

//user.js
//An highlighted block
var user = {
	name:'terry',
	age:12
};
//将user对象暴露给该模块的调用者
module.exports = user;
  1. 模块的引用
var  a = require('./user.js');
console.log(a);

require()函数参数可以为:(1)路径,一般指向自定义模块的路径。(2)模块名称,寻找该目录路径为 ./node_modules -> …/node_modules/ -> …/…/node_modules

三. babel的转换

es6:------->babel----->es5(单个文件转换)
1. npm的简单应用

$ npm install xxx --save

本地安装,安装到当前目录的node_modules目录下

$ npm install xxx --save-dev

本地安装,安装到当前目录的node-modules目录下
-dev 表示仅仅在开发阶段,当打包的时候,该模块不会被打包发布。

$ npm install xxx --global

全局安装,安装到node的家目录下,供所有的项目使用

1. npm的简单应用

(1) babel-cil

$ npm install babel-cil --global

安装的时候如果node安装在了系统目录,将无权限安装babel-cil
在安装babel-cli的时候可能会出现权限问题(如果node没有安装到用户家目录)
方案一:重新安装node
方案二:改变node目录安装权限

$ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

(2) babel-preset-latest
转换规则,安装最新的es6语法进行转换

$ npm install babel-preset-latest --save-dev

(3)在当前目录下添加配置文件

.babelrc
{
	"preset":["latest"]
}

(4) 转化(手动)

babel 1-hello.js -o 1-hello-es5.js

(5) 打包
1. 安装打包器
webpack

npm install webpack webpack-cil --save-dev

  1. 添加配置文件 webpack.config.js
var path = require('path');
module.exports = {
	entry:'./index.js',
	output:{
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist')
	},
	module:{
		rules:[{
			test:/\.js$/,
			use:['babel-loade']
		}]
	}
}
  1. 为webpack.json添加脚本
    项目信息
    依赖信息
    产品依赖 --save
    开发依赖 --save-dev
    脚本信息 scripts

  2. 执行打包
    $ npm run build (目录中会多一个dist)

  3. 安装安装babel-core babel-loader
    $ npm install babel-core babel-loader --save-dev 改变当前loader的版本 $ npm install babel-loader@7 --save-dev

  4. 安装预设babel-preset-latest
    $ npm install babel-preset-latest --save-dev

  5. 配置babel的配置文件 .babelrc
    {
    “preset”:[“latest”]
    }

  6. 在webpack中集成

开发过程

		1. 创建模块化项目
		2. 使用模块化进行编程

		3. 打包模块形成 bundle.js
		4. 将bundle.js集成到index.html中
		5. 在浏览器上运行

以上是es6的基本语法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值