静态资源构建

语雀内容

外部静态资源链接

直接 script 引入即可

  1. import React, { Component } from 'react';
  2. import HeaderComponet from './header';
  3. export default class Layout extends Component {
  4.   render() {
  5.     if(EASY_ENV_IS_NODE) {
  6.       return <html>
  7.         <head>
  8.           <title>{this.props.title}</title>
  9.           <meta charSet="utf-8"></meta>
  10.           <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"></meta>
  11.           <meta name="keywords" content={this.props.keywords}></meta>
  12.           <meta name="description" content={this.props.description}></meta>
  13.           <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"></link>
  14.           <script src="/public/lib/react-core-lib-1.0.0.min.js"></script>
  15.         </head>
  16.         <body><div id="app">{this.props.children}</div></body>
  17.       </html>;
  18.     }
  19.     return this.props.children;
  20.   }
  21. }

静态资源内敛

在日常业务开发过程中，我们可能需要内联文本，JS，CSS到页面，这时我们可以通过 webpack raw-loader 把文件转成字符串，为了防止 javaScript 被转义， 可以通过 dangerouslySetInnerHTML inline javaScript 代码。https://github.com/easy-team/egg-react-webpack-boilerplate/commit/904e17ba50f68f4160ee285bfbf06400510c1da1

  1. // inline.js
  2. function inlineTest(a, b) {
  3.   console.log('Egg React inline javascript');
  4.   var name = 'Egg React';
  5.   var title = 'Server Side Render';
  6.   return name + '-' + title;
  7. }
  9. import React, { Component } from 'react';
  10. import HeaderComponet from './header';
  11. import inlineTest from 'raw-loader!./inline.js';
  12. export default class Layout extends Component {
  14.   render() {
  15.     const inlineCode = `
  16.       function inlineCodeTest() {
  17.         console.log('Egg React inline Code javascript');
  18.         var name = 'Egg React';
  19.         var title = 'Server Side Render';
  20.         return name + '-' + title;
  21.       }
  22.     `;
  23.     if(EASY_ENV_IS_NODE) {
  24.       return <html>
  25.         <head>
  26.           <title>{this.props.title}</title>
  27.           <meta charSet="utf-8"></meta>
  28.           <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"></meta>
  29.           <meta name="keywords" content={this.props.keywords}></meta>
  30.           <meta name="description" content={this.props.description}></meta>
  31.           <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"></link>
  32.           <script src="/public/lib/react-core-lib-1.0.0.min.js"></script>
  33.           <script dangerouslySetInnerHTML={{__html: inlineCode }}></script>
  34.           <script dangerouslySetInnerHTML={{__html: inlineTest }}></script>
  35.           <script>inlineFileTest();inlineCodeTest();</script>
  36.         </head>
  37.         <body><HeaderComponet></HeaderComponet><div id="app">{this.props.children}</div></body>
  38.       </html>;
  39.     }
  40.     return this.props.children;
  41.   }
  42. }