這是模塊化開發(fā)、主流框架和最新版的ECMAScript語法規(guī)范的一個小demo
準(zhǔn)備工作
安裝 nodeJs
首先進(jìn)入node官網(wǎng)，去下載最新版的nodeJs
webpack
安裝webpack
npm install webpack -g
參數(shù)-g表示全局安裝webpack，你在cmd命令中哪個文件夾下都可以使用webpack的命令，如果不加-g的話，是只可以在你安裝webpack的目錄下使用webpack這個命令
webpack 也有一個 web 服務(wù)器
npm install webpack-dev-server -g
-g道理同上
配置webpack
1、先確認(rèn)一下項目的目錄結(jié)構(gòu)
|-app |--component |---component.js |--app.js|-build |--css |--img |--js |--index.html|-webpack.config.js
2、配置webpack.config.js
在使用webpack的時候，需要創(chuàng)建一個名為 webpack.config.js 的配置文件，這個文件在安裝webpack的時候，是不會自動創(chuàng)建的，是需要手動創(chuàng)建，文件的位置要放在當(dāng)前安裝webpack根目錄下
var path = require('path'); module.exports = { entry: path.resolve(__dirname, './app/app.js'), output: { path: path.resolve(__dirname, './build'), filename: 'js/build.js' }, module: { loaders: [{ test: //.js|.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } }] } }這是一個簡單的webpack的配置，首先先引用了path對象。
entry是一個入口文件，在這個文件中的所有內(nèi)容，會被打包到output指定目錄的指定文件當(dāng)中。
path.resolve是一個來格式化路徑的方法，path.resolve的方法參數(shù)有兩個path.resolve(from，to)，from這里的__dirname是為了獲取當(dāng)前模塊文件所在的目錄，to這里的./app/app.js是一個相對路徑，ouput是出口，ouput中的path和entry的方法同理，這里不做贅述。
filename是指向一個指定文件，入口打包的所有文件，最后代碼都會在這個出口文件中看到。
module中添加的loaders這個數(shù)組，里面的對象是用來轉(zhuǎn)換模塊的，現(xiàn)在這里只添加了一個js的模塊，用來轉(zhuǎn)換es6語法和react
這個時候，還需要安裝一個 babel-loader
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
3、修改html文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>React + Webpack + es6</title> </head> <body> <div id="aaa"></div> <script src="js/build.js"></script> </body> </html>
修改完 index.html 后，開始編寫js:
在 app.js 中，添加 alert('hello world')
然后在cmd命令行中，運行 webpack ，打包完成后打開 index.html ，會彈出一個系統(tǒng)彈窗，"hello world"。
新聞熱點
疑難解答
圖片精選
