反应，流星，webpack，es6。如何创建加载/启动屏幕

Posted 2023-02-22

【中文标题】反应，流星，webpack，es6。如何创建加载/启动屏幕

【英文标题】：react, meteor, webpack, es6. How to create a loading/splash screen

【发布时间】：2016-09-07 04:34:51

【问题描述】：

我正在使用带有 webpack 的 react、es6 模块和流星的构建。这些技术人员需要一段时间来加载他们所有的东西，然后页面上才会出现一些东西。我如何使用这个堆栈在所有这些加载时显示预加载器/启动屏幕？

我的 webpack 文件：

var autoprefixer = require('autoprefixer');

module.exports = 
    entry: [
        'babel-polyfill',
        './entry'
    ],
    resolve: 
        extensions: ['', '.js', '.jsx', '.json','css','scss']
    ,
    devtool: 'eval',
    module: 
        loaders: [
            
                test: /\.jsx?$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: 
                    plugins:['transform-runtime'],
                    presets:['es2015','stage-0','react']
                
            ,
            
                test: /\.scss$/,
                loader:  'style-loader!css-loader!sass-loader!postcss-loader'
            ,
            
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'url?limit=8192',
                    'img-loader'
                ]
            ,
        ]
    ,
    postcss: [ autoprefixer( browsers: ['last 2 versions'] ) ]
;

我的 entry.js 文件：

import '../store.js';
import './../lib/routes.jsx';

我的 routes.jsx 文件：

import React from 'react';
import FlowRouter from 'meteor/kadira:flow-router';
import mount from 'react-mounter';
import $ from 'jquery';
import store from '../store.js';
import Provider from 'react-redux';

import App from '../client/components/app/app.jsx';
import HomePage from '../client/components/pages/home/homePage.jsx';
import AboutPage from '../client/components/pages/about/aboutPage.jsx';
import BlogPage from '../client/components/pages/blog/blogPage.jsx';
import BlogPostPage from '../client/components/pages/blogPost/blogPostPage.jsx';

FlowRouter.route('/', 
    name:"home",
    action() 
        mount(App, page: <Provider store=store><HomePage /></Provider>);
    
);
FlowRouter.route('/about', 
    name:"about",
    action() 
        mount(App, page: <Provider store=store><AboutPage /></Provider>);
    
);
FlowRouter.route('/blog', 
    name:"blog",
    action() 
        mount(App, page: <Provider store=store><BlogPage /></Provider>);
    
);
FlowRouter.route('/blog/:slug', 
    name:"blog post",
    action(params) 
        console.log(params);
        mount(App, page: <Provider store=store><BlogPostPage slug=params.slug /></Provider>);
    
);

// this is just a work around for a problem I am having with initial rout loading in development mode.
if (!$('.app-root').length)
    FlowRouter.go(window.location.href.replace(/^http(s)?\:\/\/[^:\/\#]*(\:[^\/\#]*)?\/?/,'/').replace(/\#.*$/,'')+'#'+Math.floor(Math.random()*100000));

let lastPage = FlowRouter.current();
store.subscribe(()=>
    let state = store.getState();
    if (!state || state.currentURL != lastPage)
        FlowRouter.go(state.currentURL);
);

【问题讨论】：

实际上我没有尝试过任何东西，我一直想出的只是如何使用流星原生打包方法的答案，而不是在涉及 webpack 时，这几乎彻底改变了所有这些。

我也找不到任何关于 webpack 配置文件设置的有用信息，我也可以用来实现这一点。

我有点困惑......你的意思是在开发中实时重新加载？当您将其投入生产时，它并没有真正构建任何东西

为什么不先加载启动画面，然后使用ReactDOM.render() 删除节点的内容并替换为您的应用程序？

@corvid 如何实现这一目标？据我所知，在任何 javascript 似乎运行之前，需要加载完整的“应用程序”。

【参考方案1】：

经过大量研究和来自此线程的大量帮助：https://github.com/webpack/webpack/issues/215

我发现没有可靠的方法可以做到这一点，至少不是我想的那样。

我最后使用的解决方案是在我的入口文件中使用如下代码：

import $ from 'jquery';

$('body').addClass('css-loading-class-goes-here');

require.ensure(['../store.js', './../lib/routes.jsx'], function(require) 
    require(['../store.js','./../lib/routes.jsx']);
);

您可以在开始时添加 css、附加内容或其他任何您想做的事情，但这只会在 webpack 和朋友的大量“本机”javascript 加载后执行（在我的情况下约为 350kb）。然后 require.ensure 强制 webpack 在事后将我所有应用程序特定的 javascript 加载到单独的包中，因此我的“加载器”至少在加载过程的一半期间处于活动状态。

这是我最终能找到的唯一解决方案。