JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="title">Hello Loder</div>
  <div class="wrapper"><div class="typed"></div></div>
</div>
<script src="https://cdn.bootcss.com/typed.js/2.0.6/typed.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/loderWithRoute.umd.js"></script>

SCSS

.container {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
}
.title {
  font-size: 40px;
  text-align: center;
}

.wrapper {
  text-align: center;
}
.typed {
  display: inline-block;
}

Babel + JSX

// 注册资源 —— 应用创建函数
loder('createApp', () => Promise.resolve(createApp))

// 注册资源 —— 请求客户端
const url = '//cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js'
loder('axios', () => loder.loadScript(url).then(() => window.axios))


const fetchHomeData = () => Promise.resolve('homeData')
const fetchAboutData  = () => Promise.resolve('aboutData')
const fetchFallBackData  = () => {
  const axios = loder.get('axios')
	return axios('https://jsonplaceholder.typicode.com/posts')
}

// 注册资源 —— 首屏数据
loder.route('/home', () => {
	loder('data', fetchHomeData)
})
loder.route('/about', () => {
	loder('data', fetchAboutData)
})
loder.route('*', () => {
	// 等待axios加载完再发起请求
	loder('data', ['axios'], fetchFallBackData)
})

// 注册任务 —— 启动应用
loder('bootstrap', ['createApp', 'data'], () => {
  const create = loder.get('createApp') // 所有数据和应用资源已加载就绪 
  create()
})

// 开始执行bootstrap
loder.run('bootstrap')



// createApp.js
function createApp() {
  const { data } = loder.get('data') // 数据已就绪，可以同步获取
	
  var typed = new Typed('.typed', {
    strings: data.map(post => {
    	const len = Math.random()*20+20
    	return post.title.slice(0, ~~len)
    }),
    typeSpeed: 20,
    backSpeed: 10,
  });

}