react.js初学之环境搭建

1、jspm能做什么

• JavaScript 模块的写法有几种，比如 AMD,CommonJS ,CMD等等，jspm也可以做到模块化，在你的应用里，怎么去载入模块可以交给 jspm 去处理 ，jspm会自动帮你进行模块化处理。
• jspm 是包管理工具， 可以让你去从不同的源去安装不同的包 ..默认的源有 npm ， github 。
• 在开发的时候，jspm 可以使用 Traceur 或者 Babel ，实时的在浏览器上编译 JavaScript ，把 es6 的代码编译成 es5 的代码，可以将JSX语法编译成es5。
• 在正式发布应用的时候，可以优化创建的模块，把模块依赖的东西打成一个包。

2、环境搭建

• 首先需要全局安装jspm ：npm install jspm -g
• 安装完成，输入jspm ，可以打印出相应的信息，说明已经安装成功
• 然后切换到你想要建立项目目录建文件夹 mkdir react_learn , cd react_learn 进入到项目文件夹内
• npm install jspm --save-dev 项目内局部安装jspm，会在本地创建node_modules 依赖包和jspm_packages文件夹
• npm init -y 一键创建package.json文件，这个文件主要记录项目的一些信息和项目依赖
• jspm init 创建config.js配置文件
• jspm install react 安装react
• jspm isntall react-dom 安装react-dom
• 在根目录常见index.html和app文件夹（用来放reactjs文件）

目前项目环境已经搭建好

index.html:

3、安装BrowserSync，自动刷新页面

• npm install -g browser-sync 全局安装BrowserSync
• browser-sync start --server --no-notify --files 'index.html, app/**/*.js'  启动服务，并监听index.html和app文件夹下素有js文件

4、bundle 打包

jspm bundle app/main app/build.js 即是将app的main.js 打包成app的build.js

打包成功后

在你没有打包前，需要通过 BrowserSync 启动服务实时编译才能展示页面

打包后index.html引入build.js，不启动服务即可展示页面