umi.js的document.ejs引入script脚本

阅读数:163 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、简介

document.ejs模板可以为umi.js项目配置最为基本的配置,可以理解为index.html的入口,我们知道原生的react组件,都是需要挂载到html中的指定的dom元素中的,umi.js是基于react的,尽管基于umi.js来开发react项目,但是本质还是react。

所以我们还是能找到一个react根模块,显示的挂载到html的dom元素中,那么,我们可以在这个document.ejs中找到这个挂载点。

  <body>
    <div id="root"></div>
  </body>

上面的唯一一个<div id="root"></div>就是整个react的项目的根组件挂载点。

二、引入静态资源

任何前端本质还是依赖html、js、css,所以有时我们需要引入一些静态资源 (js、css等),或者设置一些<head>中的共用的dom元素如<meta>,那么就可以在这个document.ejs模板中设置。

<!-- document.ejs -->
<script src="<%= context.config.publicPath %>/lib/my.js"></script>

而context.conifg源于.umi.js,如下

// .umi.js
export default {
  publicPath: '/myPublic',
  base: basePath,
  hash: true,
  ignoreMomentLocale: true,
  targets: { ie: 9 },
  treeShaking: true,
  ...
}

 




相关推荐

umi是一个可插拔的企业级react应用框架, umi以路由为基础. 参考: <a href="https://umijs.org/zh/guide/#%E7%89%B9%E6%8

在打包里,加入hash值,即在conf.js文件里加入 export default { hash:t

一、概述 Webpack 可以帮助我们完成一些任务。比如 js 压缩、css 压缩、编译模板文件等等,从而减少前端的工作量。当然,Webpack 功能很强大,能帮我们完成的工作远远不止这些。如果我们使