摘要:這是一篇新手向文章,主要是記錄一下使用過程,希望能給予別人一些幫助和提示用做包管理用做和語法編譯器做模塊管理和打包教程是基于的,得提前安裝好。
這是一篇新手向文章,主要是記錄一下使用過程,希望能給予別人一些幫助和提示
用 Yarn 做包管理
用 Babel 做jsx和es6語法編譯器
Webpack 做模塊管理和打包
教程是基于macOS的,Nodejs得提前安裝好。我的Nodejs和npm的版本如下
node -v v6.9.2 npm -v 3.10.9Yarn安裝和配置
我們在 macOS 下可以通過brew去安裝,如下
brew update brew install yarn
Yarn 下載的包或者模塊都是跟npm一個源的,因為某些原因,下載速度非常慢,難受,所以我們得換源
Yarn 換源和npm的源是一致的,都是共享.npmrc的配置信息,所以修改給 npm 換源就是等于給 Yarn 換源,如下
npm set registry https://registry.npm.taobao.org npm set disturl https://npm.taobao.org/dist npm cache clean
通過查看.npmrc文件檢查是否更換源成功
vim ~/.npmrc項目初始化
打開你的終端,新建文件夾然后進入該文件夾,用yarn init去做初始化,過程類似npm init,會有幾個選項需要你填寫,你可以根據你的需要去填寫,這里我就直接一路回車就可以了。
mkdir react-demo cd react-demo yarn init
init完之后,就會提示success Saved package.json,說明初始化成功,我們可以查看一下package.json有什么東西
vim package.json
{ "name": "react-demo", "version": "1.0.0", "main": "index.js", "license": "MIT" }webpack安裝和配置
yarn add webpack webpack-dev-server path
安裝完畢,你會發現當前目錄多了個yarn.lock,這個文件是Yarn用來鎖定當前的依賴,不用擔心
現在,我們已經安裝好webpack了,我們需要一個配置文件用來執行,如下
touch webpack.config.js
然后更新該文件內容為如下
const path = require("path"); module.exports = { entry: "./client/index.js", output: { path: path.resolve("dist"), filename: "index_bundle.js" }, module: { loaders: [ { test: /.js$/, loader: "babel-loader", exclude: /node_modules/ }, { test: /.jsx$/, loader: "babel-loader", exclude: /node_modules/ } ] } }
從配置文件內容可以看出,為了讓webpack運行,我們需要一個入口entry和一個輸出output
為了能讓JSX代碼或者是ES6的代碼也能正常在瀏覽器運行,我們需要loaders去裝載babel-loader
更多的loaders我們可以查看 webpack文檔
Babel安裝和配置yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
在webpack配置過程中,我們用到了babel-loader,除了這個外,我們同樣需要babel的其他依賴
babel-preset-es2015 和 babel-preset-react這兩個是 Babel 的插件,告訴Babel將es2015和react的代碼編譯為Vanilla JS
安裝完畢,我們還需要去配置Babel,新建一個文件為.babelrc
touch .babelrc
然后更新該文件內容為如下
{ "presets":[ "es2015", "react" ] }
webpack中的loader的 babel-loader 就是根據這個去執行
配置入口文件現在我們的目錄結構如下
|-- node_modules |-- .babelrc |-- package.json |-- webpack.config.js |-- yarn.lock
我們需要創建新的文件夾,同時在新文件夾內新建index.js和index.html文件
mkdir client cd client touch index.js touch index.html
然后我們更新一下index.js的內容為
console.log("Hello world!")
同樣地,我們也要更新一下index.html內容為
React App Setup
index.html是我們react組件運行在瀏覽器上的載體,react組件編寫是jsx,同時也用到了es6,由于大多數瀏覽器是不支持es6和jsx,所以我們必須通過Babel編譯這些代碼,然后綁定輸出顯示在index.html上。
同時我們還需要html-webpack-plugin包為我們生成html
cd .. yarn add html-webpack-plugin
安裝完成后,打開webpack.config.js然后添加下面配置信息
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ template: "./client/index.html", filename: "index.html", inject: "body" }) module.exports = { ... module: { loaders: [ ... ] }, plugins: [HtmlWebpackPluginConfig] }
我們引入html-webpack-plugin,然后創建它的實例,然后配置template、filename和inject,其中inject: "body"是告訴插件添加JavaScript到頁尾,在閉合body標簽前
為了可以運行它,我們需要配置package.json,在"dependencies": {}代碼塊前插入如下代碼
"scripts": { "start": "webpack-dev-server" },
然后我們就可以運行了
yarn start
終端出現如下內容
Project is running at http://localhost:8080/
我們打開瀏覽器,輸入http://localhost:8080/,在開發者工具的Console,發現有一段信息為Hello world!
react安裝與配置yarn add react react-dom
然后進入client目錄,創建組件
cd client mkdir components cd components touch App.jsx cd ../..
現在我們項目目錄結構如下
|-- node_modules |-- client |-- components |-- App.jsx |-- index.html |-- index.js |-- .babelrc |-- package.json |-- webpack.config.js |-- yarn.lock
然后我們更新一下App.jsx文件的內容如下
import React from "react"; export default class App extends React.Component { render() { return (); } }Hello World Again
我們還需要修改一下我們的入口文件index.js,替換內容為如下
import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App.jsx"; ReactDOM.render(, document.getElementById("root"));
然后在終端輸入yarn start
刷新http://localhost:8080/,就能看到Hello World Again
至此,通過 Yarn 包管理,配置webpack和Babel,去搭建編寫react組件的開發環境的新手向教程就此完畢
歡迎訪問我的博客~ https://www.linpx.com/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81747.html
摘要:使用快速構建開發環境第一步安裝全局包是來自于,通過該命令我們無需配置就能快速構建開發環境。執行以下命令創建項目項目目錄在瀏覽器中打開,即可顯示上一篇開發教程初識下一篇開發教程三組件的構建 react安裝 React可以直接下載使用,下載包中也提供了很多學習的實例。本教程使用了 React 的版本為 15.4.2,你可以在官網 http://facebook.github.io/reac...
摘要:把目錄添加到環境變量中打開控制面板系統和安全系統高級系統設置高級環境變量,選中變量,然后點擊編輯。 最近公司要開發react-native項目,自己在windows系統上練習了一下,過程中發現好多問題,在這里整理出來供大家參考; 一、首先來看一下reactNative官網 官網上的教程很詳細,介紹了IOS和Android的環境搭建、示例教程等等,建議大家先按照官網的環境搭建教程嘗試搭...
摘要:把目錄添加到環境變量中打開控制面板系統和安全系統高級系統設置高級環境變量,選中變量,然后點擊編輯。 最近公司要開發react-native項目,自己在windows系統上練習了一下,過程中發現好多問題,在這里整理出來供大家參考; 一、首先來看一下reactNative官網 官網上的教程很詳細,介紹了IOS和Android的環境搭建、示例教程等等,建議大家先按照官網的環境搭建教程嘗試搭...
摘要:的另一個核心特性,蘋果表示也正在開發中,按開發進度可能幾個月后就能與我們見面。是基于的本地化數據庫,支持以及瀏覽器環境。 前端每周清單專注前端領域內容,以對外文資料的搜集為主,幫助開發者了解一周前端熱點;分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號(ID: frontshow),及時獲取前端每周清單。 本期是 2017 年的最后一...
閱讀 818·2023-04-25 22:13
閱讀 2335·2019-08-30 15:56
閱讀 2218·2019-08-30 11:21
閱讀 650·2019-08-30 11:13
閱讀 2014·2019-08-26 14:06
閱讀 1950·2019-08-26 12:11
閱讀 2282·2019-08-23 16:55
閱讀 530·2019-08-23 15:30