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