es6的基础知识

一、 npm应用
node的包管理机制
npm init
npm install xxx
npm uninstall xxx
npm config list
npm run xxx
二、 js的模块化
js之间相互调用,相互配合

js与js
jquery.js
a.js
b.js
c.js
common.js
index.js
--->
bundle.js

mode

(0) requireJS
(1)commonJS
	.1 模块定义
		任何的js文件module对象
		目录作为模块,npm init初始化当前目录,index.js
		
		module.exports
		module.exports = {
			name:'',
			sayName:function(){}
		}

		module.exports.name = '';
		module.exports.sayName= function(){}





	
   
  .2导入模块
		require()
	.3 打包
		webpack

(2) ES6
	.1. 定义模块
		
		export default {

		}
	
.2导入模块

		import xxx from xxx;

三、 ES6->ES5转换
.1) 手动转换
$ babel a.js -o a-es5.js
…1. npm install babel --global
…2. npm install babel-preset-latest
…3. .babelrc
…4. $ babel a.js -o a-es5.js

.2) 自动转换(集成到webpack)
	npm run build
	..1. npm install babel-core babel-loader --save-dev
	..2. npm install babel-preset-latest
	..3. .babelrc
	..4. webpack.config.js
	..5. $npm run build

四、模块化编程解决前端需求过程

app01
	index.html
	css
		style.css
	js
		index.js
	images
	font
app02
	index.html
	css
	images
	font
	js
		???
		【bundle.js】
		app02-js
			package.json
			index.js
			src
				category.js
				article.js
				user.js
				http.js

app03
	package.json
	index.js
	App.vue (html js css)
	src
		category.vue(html js css)
		article.vue(html js css)
		user.vue(html js css)
		http.js

	npm run build
		dist
			index.html
			css
			js
			images
			font
发布了6 篇原创文章 · 获赞 7 · 访问量 550

猜你喜欢

转载自blog.csdn.net/weixin_43367262/article/details/83002864