React系列一——jspm管理

最新推荐文章于 2023-12-19 10:28:53 发布

可芭乐

最新推荐文章于 2023-12-19 10:28:53 发布

阅读量472

点赞数

分类专栏： react基础系列

本文链接：https://blog.csdn.net/a839371666/article/details/79389448

版权

react基础系列专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是jspm

JavaScript 模块的写法有几种，比如 AMD，CommonJS .. 还有标准化的 ES6 的写法 .. jspm支持加载所有的用这些方法写的JavaScript 模块
在你的应用里，现在就可以使用 ES6 提供的标准写法 .. 至于怎么去载入模块可以交给 jspm 去处理 .. 也就是你只需要了解ES6 的模块写法
jspm 还是一个为浏览器上用的东西准备的一个包管理 .. 比如它可以让你去从不同的源去安装不同的包 .. 默认的源有 npm ，还有 github .. 安装好你需要的包以后，在你的代码里，只需要一行代码，就可以使用这些包提供的功能 .. 不用担心其它的事情
在开发的时候，jspm 可以使用 Traceur 或者 Babel ，实时的在浏览器上编译 JavaScript ，把 es6 的代码编译成 es5 的代码
在正式发布应用的时候，可以优化创建的模块，把模块依赖的东西打成一个包

jspm安装

npm install jspm -g   //全局安装
npm install jspm --save-dev // 把 jspm添加到项目开发依赖

若存在报错

err  Git not installed. You can install git from http://git-scm.com/downloads.  
err  Unable to load registry github  
err  Error downloading loader files.  
err  Unable to load registry github

解决方案：安装Git
React、react-dom、semantic-ui安装

 jspm install react
 jspm install react-dom
 jspm install semantic-ui

安装插件css

 jspm install css

创建服务器监视文件的变化

 browser-sync start --server --files "index.html, app/**/*.js"

若存在报错——先安装browser-sync，再创建服务器监视

 npm install browser-sync
 browser-sync start --server --files "index.html, app/**/*.js"

在项目中创建index.html并输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div class="ui container" style="padding: 30px">
        <button class="ui green button">hello</button>
    </div>
    <div id="app"></div>

</body>
<!-- 导入system.js-->
<script src="jspm_packages/system.js"></script>
<!-- 导入config.js-->
<script src="config.js"></script>
<script>
    System.import('./app/main');   //导入app目录下的main文件
</script>
</body>
</html>

当做模板文件
在项目中创建app/main.js

'use strict'

import React from 'react';
import ReactDom from 'react-dom' ;

import 'semantic-ui/semantic.min.css!';  //“！”必须加

ReactDom.render(
  <h1>hello jspm</h1>,
document.getElementById('app')
) ;

显示结果：
这里写图片描述

可芭乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
React系列一——jspm管理

什么是jspmJavaScript 模块的写法有几种，比如 AMD，CommonJS .. 还有标准化的 ES6 的写法 .. jspm支持加载所有的用这些方法写的JavaScript 模块在你的应用里，现在就可以使用 ES6 提供的标准写法 .. 至于怎么去载入模块可以交给 jspm 去处理 .. 也就是你只需要了解ES6 的模块写法jspm 还是一个为浏览器上用的东西准备的一个包管理...
复制链接

扫一扫