大家好，我是維維，今天來跟報告下這幾天的進度吧。
總體要做的事大概都列出來了
1.專題；主要是有關react的相關製作。
2.語言：日文跟英文，主要先以N1跟畢業門檻的多益為主。
3.基礎學科：目前打算先看離散跟資料結構。
4.盲打：慢慢進行，大概每天練1個小時左右。
今天的進度
日文單字，單字量實在有點不足，之前的文法也說不上是很熟，若是這次N1沒辦法過的話，12月得在考一次才行
資料結構第一章，還是看中文書比較方便，主要是想多做點習題，這方面要多花點時間
專題，嘗試用NODEJS嘗試建立REACT的開發環境，結果在第一步就炸掉了，明天打算用用看facebook的create-react-app部屬在heroku上
不過實驗室的開會日期還沒定下來，有點不安阿。
今天在react遇到的問題：
(1)loader：
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
},
},
],
configuration.module has an unknown property 'loaders'
看到他文件的解釋說是
loaders 則是放欲使用的 loaders，在這邊是使用 babel-loader 將所有 .js（這邊用到正則式）相關檔案（排除了 npm 安裝的套件位置 node_modules）
轉譯成瀏覽器可以閱讀的 JavaScript。
preset 則是使用的 babel 轉譯規則，這邊使用 react、es2015。若是已經單獨使用 .babelrc 作為 presets 設定的話，則可以省略 query
因為錯誤訊息說不知道這東西，所以我是把他註解掉了，也很神奇的可以運作，他也說若是.babelrc設定的話可以省略。
老實說有艇多東西還不懂得，像是preset到底是甚麼。
好的，總之，為了瞭解這是什麼我花了點時間查了點資料，以下是我的一些小整理。
首先，得些說到bable，這是什麼呢，大家可以看到，剛才的loader裡面就是babel-loader。
簡而言之，這東西能夠轉換你寫的.js使之成為瀏覽器看得懂的形式，
而下面的preset 則是他所支援的各種轉換，
es2015；支援轉換成最新版本的javascript ES2015(ES6)
react:讓他支援轉換JSX//但是不知道為何我這裡卡住了
在default的設定下，這兩項都是打開的
在這裡還可以使用他們實驗中的內容，分成stage0~4，有興趣知道的請去看看他們的文件吧
簡單來說是這樣，而他有數種方法可以導入babel
放在package.json：在node init 產生的json檔
放在.babelrc：似乎是比較推薦的做法
//我在一邊打這篇文的時候找出解決方法了
至於我試驗的這個方法，因為有引入webpack 所以他是也寫在webpack.config.js裡面
若是使用我這個教學的做法的話，請把loader改成rules，webpack在最新版本改動了這部分
//改成這樣
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
},
},
]
原來是他們改動了裡面的架構，所以他才一直找不到loader是甚麼鬼東西。
這樣就可以順利運作啦，今天算是圓滿達成，明天也要繼續努力。
參考資料：
What are Babel "plugins" and "presets"? (And how to use them)
https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/
React 開發環境設置與 Webpack 入門教學
https://github.com/kdchang/reactjs101/blob/master/Ch02/webpack-dev-enviroment.md
別人從facebook開發社群改動出來的create-react-app-buildpack
https://github.com/mars/create-react-app-buildpack
創作內容
維維的學習紀錄2018/7/11 babel&loader
未分類 (4)