关于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/

 

posted @ 2019-03-22 12:38  一只特立独行的程序猿  阅读(1965)  评论(0编辑  收藏  举报