標籤：define 應該 github undefined load char 接下來 ade invalid
最近一直在學react,react的基礎部分已經學得差不多了，然而自己並沒有做詳細的記錄，有興趣的同志可以參考阮一峰老師的教程，個人覺得挺不錯的，連結如下：https://github.com/ruanyf/react-babel-webpack-boilerplate,
學完了基礎就想倒騰倒騰，webpack整合react加es6。
1.webpack + react + es61.1 建立項目項目目錄如下
具體的內容就不解釋了，大家應該都看得懂
1.2 配置webpack設定檔如下
var path = require(‘path‘);var webpack = require(‘webpack‘);module.exports = { context: __dirname + "/", entry: ["./src/js/test.js"], output: { path: path.join(__dirname, ‘./src/build‘), filename: "main.js" }, module: { loaders: [{ test: /\.js$/, loader: ‘babel‘, query: { presets: [‘es2015‘, ‘react‘] } }, { test: /\.scss$/, loader: ‘style!css!sass‘, }] }, // plugins: [ // new webpack.optimize.UglifyJsPlugin({ // compress: { // warnings: false // } // }) // ]};
module中功能包括jsx轉js，es6裝es5，scss轉css，
這裡使用到了 webpack 的一個內建外掛程式 UglifyJsPlugin，通過他可以對產生的檔案進行壓縮，這裡我注釋掉了
接下來把重要的代碼給大家
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"></div> <script src="./build/main.js"></script></body></html>
foot.js
import React from ‘react‘;export default class Foot extends React.Component { constructor(props) { super(props); } render() { return <h1>Hello World</h1>; }}
test.js
import React from ‘react‘;import ReactDOM from ‘react-dom‘;import Foot from ‘./foot.js‘;require(‘./../css/base.scss‘);ReactDOM.render( <Foot />, document.getElementById("app"));
這是最簡單的webpack加react，test.js為入口檔案
2.常見問題
問題1 Uncaught TypeError: Super expression must either be null or a function, not undefined
如果碰到這個問題不要去百度了，先狠狠的打自己一頓起，因為你是單詞寫錯了，出現這個問題百分之99.99是因為單詞寫錯了，反正我是把Component寫成了Compontent
問題2 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
出現這個問題，我也搞了很久，最後把 import { Foot } from ‘./foot.js‘ 改成了 import Foot from ‘./foot.js‘ 就解決了，然而我並不知道為什麼
最後: 我只是一個萌萌的前端，有問題一起思考，大家共同進步
webpack + react + es6, 並附上自己碰到的一些問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
