一、 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