文章出處
文章列表
話不說直接上正題。
環境搭建
- Babel--目前瀏覽器對于ES6的語法解析支持度還不高，所以要通過轉碼在編譯，所以在使用ES6之前要安裝Babel，之前安裝的時候遇到了一些問題但是沒有全部記錄下來，現在只能是盡力重現一下。
Babel6版本開始已經不支持使用npm install babel -g 安裝了，它分成了幾個部分
- babel cli,適用于命令行
- babel-core，包含node api
npm install babel-cli -g npm install babel-core --save-dev
babel需要手動安裝插件
npm install babel-preset-es2015
然后在命令行輸入vim .babelrc在文件夾下面創建一個叫.babelrc的文件，并寫入如下代碼：
{
"presets": ["es2015"]
}
然后保存退出。
2.配置webpack
可以參考
http://www.cnblogs.com/vajoy/p/4650467.html
首先記錄下webpack的使用
1、新建一個文件夾存放我們的項目
npm init 創建package.json的配置文件
2、把webpack保存到本地依賴里面
npm install webpack --save-dev
3、單個文件打包
新建js文件entry.js里面寫上js代碼，然后使用
webpack entry.js bundle.js
即可在本地目錄生成一個打包好的bundle.js，然后把bundle.js引入到頁面中
4、webpack默認打包js文件，如果我們需要打包css文件需要加載相應的loader
例如：css需要加載的loader有css-loader和style-loader
npm install css-loader style-loader --save-dev
然后在入口文件entry.js中加入
require('style!css! ./style.css'); //把css當做模塊加載進來
5、文件太多時候這樣寫就過于繁瑣了，我們可以使用webpack.config.js文件定義webpack的配置，
module.exports ={
entry:'./entry.js', //定義的入口文件
output:{
path: __dirname, //打包好的文件的路徑
filename: 'bundle.js' //打包好的文件名
},
devtool:'source-map', //生成source-map 可以在瀏覽器通過sourcemap看到我們寫的打包之前的文件，便于調試 （可以在打包之前的文件需要調試的地方加入 debugger；作用類似于斷點）
module:{ //當打包的文件中使用了loader時候我們需要這樣寫
loaders:[
{test:/\.js$/, exclude:/node_modules /, loader: 'react-hot!babel'}, //exclude 指的是排除那些文件不打包
{test:/\.css$/, loader:'style!css'}
]
}
}
6、在webpack中使用babel
首先得在本地安裝babel需要的依賴
npm install babel-loader babel-core babel-preset-es2015 --save-dev
然后在項目根目錄下增加.babelrc文件里面輸入
{
presets:["es2015"]
}
總和使用webpack+babel+react
首先在項目本地安裝依賴
npm install babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev
然后安裝react的
npm install react react-dom --save
然后在項目中配置.babelrc
{
"presets":["es2015","react"]
}
新建一個name.js
" use strict";
import React from "react";
class Name extends React.Component{
render(){
return(
<div>
hello~~ yang <input />
</div>
);
}
}
export {Name as default};
然后在entry.js入口文件中配置
"use strict";
import React from "react";
import ReactDOM from "react-dom";
import Name from './name';
ReactDOM.render(
<Name />,
document.getElementById('app')
);
webpack.config.js配置
module.exports ={
entry:'./entry.js',
output:{
path: __dirname,
filename: 'bundle.js'
},
devtool:'source-map',
module:{
loaders:[
{test:/\.js$/, exclude:/node_modules /, loader: 'react-hot!babel'},
{test:/\.css$/, loader:'style!css'}
]
}
}
然后在package.json中加一句話在
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack-dev-server --inline --hot"
},
然后在控制臺運行
npm run watch
就能在瀏覽器中訪問 http://localhost:8080
文章列表
全站熱搜
留言列表
