react.js初学之环境搭建

1、jspm能做什么

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

react.js初学之环境搭建_第1张图片


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:

react.js初学之环境搭建_第2张图片

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

react.js初学之环境搭建_第3张图片

打包成功后

react.js初学之环境搭建_第4张图片


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

react.js初学之环境搭建_第5张图片

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

react.js初学之环境搭建_第6张图片

react.js初学之环境搭建_第7张图片

你可能感兴趣的:(react.js初学之环境搭建)