加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react.js初学之环境搭建

发布时间:2020-12-15 07:19:56 所属栏目:百科 来源:网络整理
导读:1、jspm能做什么 JavaScript 模块的写法有几种,比如 AMD,CommonJS,CMD等等,jspm也可以做到模块化,在你的应用里,怎么去载入模块可以交给 jspm 去处理 ,jspm会自动帮你进行模块化处理。 jspm 是包管理工具, 可以让你去从不同的源去安装不同的包 ..默认的

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,不启动服务即可展示页面


(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读