webpack环境配置
npm init
npm i
安装webpack
npm i webpack webpack-cli -D
创建webpack.dev.config.js 定义入口文件 出口文件 npm i 看效果
搭建服务 输出编译模板
npm i webpack-dev-server -D
引入node内置模块 path
输出html模板
npm i html-webpack-plugin -D
es6 转码
//https://www.babeljs.cn/docs/setup#installation 官网
npm install --save-dev babel-preset-es2015 babel-core babel-loader babel-polyfill babel-preset-latest
babel-preset-env babel-plugin-transform-runtime
{
"presets": ["es2015", "latest", "env"],//设置转码规则
"plugins": []//设置插件
}
package.json
{
"name": "json",
"version": "1.0.0",
"description": "demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
},
"author": "snow",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"hot-module-replacement": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.16.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"babel-runtime": "^6.26.0"
}
}
webpack.dev.config
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const htmlTemplateTitle = 'my-first-templateTitle';
//http://www.css88.com/doc/webpack2/configuration/dev-server/ 文档地址
module.exports = {
//入口文件
entry: './src/index.js',
//出口文件
output: {
path: __dirname,
filename: './release/boundle.js'
},
module: {
rules: [{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
}]
},
plugins: [
//输出的html模板 https://github.com/jantimon/html-webpack-plugin#third-party-addons
new htmlWebpackPlugin({
title: htmlTemplateTitle,
template: './index.html'
}),
],
//启动服务
devServer: {
//告诉服务器从哪里提供内容
contentBase: path.join(__dirname, './release'),
//自动打开浏览器
open: true,
//端口
port: 9000,
}
}
.babelrc
{
"presets": ["es2015", "latest", "env"],
"plugins": []
}
目录结构
## 面向对象
##三要素 封装 继承 多态
# 概念------类 对象------实例
继承 子类继承父类
封装 数据的权限和保密 类似typescript 我们有一些私有的方法或者变量不需要被继承 公开
多态 同一接口不同实现
##应用举例
##面向对象意义
console.log("index.js")
//概念------类
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
}
//对象------实例
// let snow = new Person('snow', '18');
// console.log(snow.getName());
//对象------实例
// let kris = new Person('kris', '18');
// console.log(kris.getName());
class People {
constructor(name, age) {
this.name = name;
this.age = age;
}
eat() {
console.log(`${this.name} eat sonmething`);
}
speak() {
console.log(`${this.name} speak sonmething`);
}
}
class Student extends People {
constructor(name, age, number) {
super(name, age);
this.number = number;
}
study() {
console.log(`${this.name} study`);
}
}
let snow = new Student('snow', 17, '01');
snow.eat();
snow.study();
let kris = new Student('kris', 18, '02');
kris.speak();
kris.study();