再一次輸給了版本更新
main.js
//這裏的main.js是我們項目的JS入口文件
import $ from 'jquery'
import './css/index.css'
// import './css/index.less'
import 'bootstrap/dist/css/bootstrap.css'
$(function(){
$('li:odd').css('backgroundColor','blue')
$('li:even').css('backgroundColor',function(){
return 'lightblue'
})
})
class Person{
static info = { name:'zs',age:20 }
}
//訪問Person類身上的info靜態屬性
console.log(Person.info)
//通過Babel可以幫我們將高級的語法轉換爲低級的語法
//1.在webpack中,可以運行如下兩套命令,安裝兩套包,去安裝Babel相關loader功能:
//1.1第一套包:npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
//1.2第二套包:npm i babel-preset-env babel-preset-stage-0 -D
//2.打開webpack的配置文件,在module節點下的rules數組中,添加一個新的匹配規則:
//2.1{ test:/\.js$/,use:'babel-loader',exclude:/node_modules/ }
//3.在項目的根目錄中,新建一個叫做.babelrc的Babel配置文件,這個配置文件屬於JSON格式,
//所以,在寫babelrc配置的時候,必須符合JSON語法規範:不能寫註釋,字符串必須用雙引號。
//3.1在.babelrc寫如下的配置:
//{
// "presets":["env","stage-0"],
// "plugins":["transform-runtime"]
//}
劃重點:npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
package.json
裏的版本號一覽
{
"name": "WEBPACK-STUDY",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.5.0",
"jquery": "^3.5.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^3.5.3",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^2.30.1",
"less": "^3.11.1",
"less-loader": "^6.1.0",
"style-loader": "^1.2.1",
"url-loader": "^4.1.0",
"webpack": "^3.0.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^2.11.5"
}
}