關於react-native環境你需要了解的node/npm/webpack


關於環境,你需要了解的知識:

1、node.js / npm / webpack  

react-native算是web應用,幾乎所有代碼都是JavaScript來寫的(哈哈哈哈哈此時我要說一句:JavaScript是世界上最好用的編程語言,PHP的同學肯定不符)

下面你需要了解node.js和npm,神器登場,讓npm助react-native一臂之力。

 

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境,使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。 

 

npm是什么? => JavaScript 倉庫

npm is written in Node.js, so you need to install Node.js in order to use npm. You can install npm via the Node.js website, or by installing a Node Version Manager(NVM). This chapter explains both options.

npm 為你和你的團隊打開了連接整個 JavaScript 天才世界的一扇大門。它是世界上最大的軟件注冊表,每星期大約有 30 億次的下載量,包含超過 600000 個 包(package) (即,代碼模塊)。來自各大洲的開源軟件開發者使用 npm 互相分享和借鑒。包的結構使您能夠輕松跟蹤依賴項和版本。

 

npm部分組成:

網站 是開發者查找包(package)、設置參數以及管理 npm 使用體驗的主要途徑。

注冊表 是一個巨大的數據庫,保存了每個包(package)的信息。

CLI 通過命令行或終端運行。開發者通過 CLI 與 npm 打交道。

 

npm install <package_name>

 

管理本地npm包的最好方式是新建一個package.json文件

To get a default package.json

npm init -y

 

To add an entry to your package.json's dependencies:

npm install <package_name> --save

To add an entry to your package.json's devDependencies:

npm install <package_name> --save-dev

全局安裝

npm install/uninstall -g <package>

npm install -g webpack@3.10

npm install webpack-cli -D

 

在 package.json 文件所在的目錄中執行 npm update 命令

 

如需刪除 node_modules 目錄下面的包(package),請執行:

npm uninstall webpack

如需從 package.json 文件中刪除依賴,需要在命令后添加參數 --save:

npm uninstall --save webpack

 

 

Webpack 是一個模塊打包器。它將根據模塊的依賴關系進行靜態分析,然后將這些模塊按照指定的規則生成對應的靜態資源。

 

 

Webpack 本身只能處理 JavaScript 模塊,如果要處理其他類型的文件Webpack Loader

Webpack Loader 可以理解為是模塊和資源的轉換器,它本身是一個函數,接受源文件作為參數,返回轉換的結果。

Webpack 在執行的時候,除了在命令行傳入參數,還可以通過指定的配置文件來執行。默認情況下,會搜索當前目錄的 webpack.config.js 文件,這個文件是一個 node.js 模塊,返回一個 json 格式的配置信息對象,或者通過 --config 選項來指定配置文件。

在根目錄創建 package.json 來添加 webpack 需要的依賴:

{
  
"name""webpack-example",
  
"version""1.0.0",
  
"description""A simple webpack example.",
  
"main""bundle.js",
  
"scripts": {
    
"test""echo \"Error: no test specified\" && exit 1"
  },
  
"keywords": [
    
"webpack"
  ],
  
"author""zhaoda",
  
"license""MIT",
  
"devDependencies": {
    
"css-loader""^0.21.0", //兼容版本 
    
"style-loader""^0.13.0", //大致相當的版本
    
"webpack""^1.12.2"
  }
}

 npm install

創建 webpack.config.js

var webpack = require('webpack')

module.exports = {
  entry: 
'./entry.js',
  output: {
    path: __dirname,
    filename: 
'bundle.js'
  },
  
module: {
    loaders: [
      {test: 
/\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}

同時簡化 entry.js 中的 style.css 加載方式:

require('./style.css')

最后運行 webpack,可以看到 webpack 通過配置文件執行的結果和上一章節通過命令行 webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader' 執行的結果是一樣的。

 

另外Redux也了解一下,日后說不定你會用到

http://cn.redux.js.org/

 

 

 2、開發環境配置

 官方配置 Mac & Windows

 https://reactnative.cn/docs/getting-started/

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM