相关疑难解决方法(0)

我已经window.addEventListener('DOMContentLoaded', function() {});用jQuery 替换了$(document).bind('ready', function() {});,因为第一个没能在IE <9上工作而且我不想玩.attachEvent()那个虚拟浏览器,如果我可以用jQuery本身很好地覆盖它.

更换后不久,我注意到DOMContentLoaded事件总是在页面加载/刷新后大约0-2毫秒被触发(至少这是我的日志记录脚本记录的内容),而.ready()在页面刷新后总是需要至少15-20毫秒,被解雇(再次 - 由脚本记录).

我问的纯粹是为了满足我的好奇心,为什么会出现这种"显着"的延迟？当然,对我来说没有问题,jQuery稍后会触发该事件.只是,因为我想知道所有的答案(统治世界!:)),我无法忍受!:]

编辑:在.ready()函数doc一些用户(Nick(of Nexxar))指出:" jQuery模拟IE上不存在的"DOMContentLoaded"事件,但使用的机制比其他浏览器上使用的事件发出的时间要晚得多 " .也许这是一样的,我要求的？

我最近创建了我的webpack配置文件：

const path = require("path");

const SRC_DIR = path.join(__dirname, "/client/src");
const DIST_DIR = path.join(__dirname, "/client/dist");

module.exports = {
  entry: `${SRC_DIR}/index.jsx`,
  output: {
    filename: "bundle.js",
    path: DIST_DIR
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: SRC_DIR,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ["react", "es2015"]
        }
      }
    ]
  },
  mode: "development"
};

这个很好用，并且捆绑了jsx文件：

import React from "react";
import ReactDOM from "react-dom";

class MainApp extends React.Component {
  render() {
    return (
      <div className="content">
        <h1>Hello World</h1>
      </div>
    );
  }
}

ReactDOM.render(<MainApp />, …

我有这个工作,不记得我改变了什么,现在页面加载但没有反应呈现在屏幕上.不确定错误在哪里.运行webpack -m后跟npm start时没有错误发生

webapp文件夹就像这样......

• {app} - App.js
• {public} - bundle.js - index.html
• webpack.config.js
• .babelrc
• 的package.json

这是重要的文件

的WebPack

module.exports = {
  entry: './app/App.js',
  output: {
    path: './public',
    filename: 'bundle.js',
  },
  devServer: {
      inline:true,
      contentBase: './public',
      port: 3333
    },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  }
}

的package.json

{
  "name": "newaccount",
  "version": "1.0.0",
  "description": "a form submission for new accounts",
  "main": "App.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "---",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.1", …

我已经创建了 React 应用程序，我需要为其他网站生成嵌入代码。这是一个大型应用程序，我只想将一个组件作为其他域的小部件。我已阅读使用 React 和 Webpack 编写可嵌入的 Javascript 插件以及如何将React组件嵌入其他域？. 我设置了我的 webpack，但仍然无法在另一个域上呈现小部件。

这个小部件应该：

1. 可以通过<script>标签获得，而不是 iframe
2. 只显示应用程序的一部分（路径/referral），而不是所有应用程序

小部件是一个按钮和弹出窗口，通过单击按钮显示。

这是我webpack.config.js的client文件夹：

const path = require('path');
const bundleOutputDir = './referral';
const env = require('yargs').argv.env;

module.exports = env => {
  const isDevBuild = !(env && env.prod);

  if (env === 'build') {
    mode = 'production';
  } else {
    mode = 'development';
  }

  return [
    {
      mode: mode,
      entry: './src/components/early-referrals/Referral.js',
      output: {
        filename: 'widget.js', …