react+webpack+webstorm開發環境搭建

npm 下載的時候是從國外的源下載的緣故。所以可以把 npm 的源改成國內的 taobao 的源,這樣會加速下載過程。在執行上面的命令之前可以先修改一下 npm 的源:

npm config set registry https://registry.npm.taobao.org

React官方腳手架地址:

https://github.com/facebook/create-react-app

在終端下安裝執行npm install -g create-react-app  不用每個項目都裝。一個webstorm裝一次即可

npm install -g create-react-app

npm uninstall -g create-react-app   // 卸載安裝的包

可以直接使用它來構建一個 react 的前端工程

create-react-app my_app

Webpack 是一個前端資源加載/打包工具,只需要相對簡單的配置就可以提供前端工程化需要的各種功能,並且如果有需要它還可以被整合到其他比如 Grunt / Gulp 的工作流

安裝 Webpack:

npm install -g webpack

npm install -g webpack-cli

Webpack 使用一個名爲 webpack.config.js 的配置文件,要編譯 JSX,先安裝對應的 loader: npm install babel-loader --save-dev

 

--save-dev 會把下載包的相關信息寫到package.json的devDependencies裏面方便以後發佈,其他人使用的時候只需要npm install就可以把相關的依賴下載到當前的項目裏面。

-g表示把這這個包安裝在全局中

 

使用babel可以將ES2015的代碼編譯成ES5的,也可以將JSX編譯成javascript函數。
這種過程稱爲‘轉譯’ ,因爲它將源代碼編譯成另一份新的源代碼,而不是可執行文件。

運行webpack時報了一個:Plugin/Preset files are not allowed to export objects 翻譯過來就是 :(插件/預設文件不允許導出對象)

因爲 babel 的版本衝突  core的版本是6.x 要求loader的版本爲7.x。目前core的最新版本是6.x,而最新的loader已經更新到了8.x,所以在安裝loader的時候要指定一下版本號

下面是官方文檔說明版本對應要求:

//這段是官方文檔中的,應該是對版本之間的一些要求吧。

webpack 4.x | babel-loader 8.x | babel 7.x

如果 你配置裏的babel-loader 8.x版本的話你對應的babel 就爲 7.x

運行下面這句:

npm install babel-loader@8 babel/core @babel/preset-env babel-preset-react babel-cli babel-preset-es2015 webpack

 

 

webpack 4.x | babel-loader 7.x | babel 6.x

如果 你配置裏的babel-loader 7.x版本的話你對應的babel 就爲 6.x

運行下面這句:

npm install babel-loader@7 babel-core babel-preset-env babel-preset-react babel-cli babel-preset-es2015 webpack

npm install --save-dev babel-preset-stage-0

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章