安裝
cnpm i babel-core@6.26.3 babel-loader@7.0.0 babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
main.js 文件
import $ from 'jquery' import './css/index.css' import './css/index.scss' // 如果要通過路徑的形式,去引入node_modules中相關的文件,可以直接省略路徑前面的node_modules這一層目錄 //直接寫包的名稱,然后后面跟上具體的文件路徑。 import 'bootstrap/dist/css/bootstrap.css' // class關鍵字,是ES6中提供的新語法,是用來實現ES6中面向對象編程的方式 // java c# 實現面向對象的方式完全一樣,class是從后端語言中借鑒過來的 class Person{ // 使用static關鍵字,可以定義靜態屬性 // 所謂的靜態屬性,就是可以直接通過類名直接訪問的屬性。 // 實例屬性:只能通過類的實例來訪問的屬性叫實例屬性 static info = { name : 'li' , age : 20} } // 訪問Person類身上的info靜態屬性。 console.log(Person.info) // 在webpack中。默認只能處理一部分ES6的新語法,一些更高級的ES6語法處理不了。需要借助第三方的loader // 把高級語法轉為低級的語法后會把結果交給webpack打包的bundle.js // 通過 Babel,可以將高級語法轉換為低級語法 // 1, 在webpack中可以運行如下兩套命令,安裝兩套包,去安裝Babel相關的loader功能 // 1.1, 第一套包 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D // 1.2, 第二套包 cnpm i babel-preset-env babel-preset-stage-0 -D // 2. 打開webpack的配置文件,在module節點下的rules數組中,添加一個新的匹配規則 // 2.1 { test:/\.js$/,use:'babel-loader',exclude:/node_modules/ } // 2.2 在配置babel的loader規則的時候,必須把node_modules目錄通過exclude選項排除掉。 // 3, 在項目的根目錄中,新建一個叫做 .babelrc 的Babel配置文件,這個文件屬於json格式,所以在寫 // babel必須遵守json語法規范,不能寫注釋 // 3.1 在 .babelrc 寫如下配置 // { // "presets" : ["env","stage-0"], //presets語法的意思 // "plugins" : ["transform-runtime"] // } var p1 = new Person()
webpack.config.js 文件
const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry : path.join(__dirname,'./src/main.js'), output : { path : path.join(__dirname,'./dist'), filename : 'bundle.js' }, plugins : [ new htmlWebpackPlugin({ template : path.join(__dirname,'./src/index.html'), filename : 'index.html' }) ], module : { rules : [ {test:/\.css$/,use:['style-loader','css-loader']}, {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, // 處理圖片路徑的loader. loader可以傳參跟url傳參一樣 // limit給定的值是圖片的大小,單位是byte,如果引用的圖片大於或等於給定的limit值,則不會 // 被轉為base64格式的字符串,如果圖片小於給定的limit值,則會被轉為base64格式的字符串。 // [hash:8]-在每個圖片前加8位的哈希值.從32位哈希值取前8位。配置最大32 {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=1000&name=[hash:8]-[name].[ext]'}, {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//這是處理字體文件的配置 {test:/\.js$/,use:'babel-loader',exclude:/node_modules/} //配置babel來轉換es6語法 ] } }
運行項目 后報錯。版本不對, npm view babel-loader versions查看所有 版本號
這里要求如果使用babel-core版本為6.x , 那就必須得要使用7.x的babel-loader。卸載重新指定版本安裝即可。