的WebPack reactjs應用加載失敗：未捕獲的ReferenceError：snapapp沒有定義

這是最小reactjs應用程序，它採用的WebPack然後運行時捆綁中，從瀏覽器控制檯提供了以下錯誤：的WebPack reactjs應用加載失敗：未捕獲的ReferenceError：snapapp沒有定義

Uncaught ReferenceError: snapapp is not defined

燦有人建議爲什麼？

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
</head> 
<body class='section'> 
<div id="app"></div> 
<script type="text/javascript" src="./build/snapapp.js"></script> 
<script type="text/javascript"> 
    (function() { 
     var mountNode = document.getElementById('app'); 
     snapapp.start(mountNode); 
    })(); 
</script> 
</body> 
</html>

index.js

import { render } from 'react-dom'; 
import rootLayout from './src/components/ApplicationLayout.jsx'; 
import hello from './src/components/hello.jsx'; 
export function start(mountNode) { 
    render(<rootLayout />, mountNode); 
}

webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    entry: './index.js', 
    output: { 
    path: 'build', 
    filename: 'snapapp.js', 
    libraryTarget: "umd" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
    } 
};

SRC /組件/ hello.jsx

import React from 'react'; 

class Hello extends React.Component { 
  render() { 
    return <h1>Hello</h1> 
  } 
}

來源

2015-11-26 Duke Dougal

您正在從您的模塊中導出snapapp，但您並未在任何地方導入/需要它，它不作爲全局變量存在。

來源

2015-11-26 10:15:45 Lee

我在這裏放棄了我的新手狀態，但是從哪裏導入它？這樣的導入是什麼樣的？ –

讓它起作用的最簡單方法是從index.js中導出一個函數，而不是在HTML中初始化它。在導入方面，在另一個JS文件中，即'Main.js'，你可以從'./index';'或'var snapapp = require（'./ index'）導入snapapp;' – Lee

嗯... snapapp.js是index.js - 這是webpack捆綁index.js的結果，所以我不能從那裏加載它。 –

您正在導出爲UMD文件格式。如果您需要在index.html文件中的內嵌代碼，那麼你要麼需要使用圖書館像Require

替代，您可以：

輸出到VAR

變化umd到var，你可以閱讀約it here，這會將您的庫添加到window全局對象。允許您像在HTML文件中那樣調用它。

output: { 
    path: 'build', 
    filename: 'snapapp.js', 
    libraryTarget: "var" 
}

將您在啓動腳本到您的文件包中

除非有一些特殊的原因，我將移動在啓動腳本到您的index.js文件。沒有理由不能從文件中獲取安裝點。這也是你正在嘗試做的一個非常普遍的模式。

import { render } from 'react-dom'; 
import rootLayout from './src/components/ApplicationLayout.jsx'; 
import hello from './src/components/hello.jsx'; 

render(<rootLayout />, document.getElementById('app'));

來源

2017-06-22 10:59:03 roughcoder

的WebPack reactjs應用加載失敗：未捕獲的ReferenceError：snapapp沒有定義

回答

相關問題