Javascript/React（與Gulp/Babel） - 無法導入

我正在爲Atlassians JIRA系統開發一個插件，我想提供一些高級用戶控件。我已經嘗試過實施ES2015/Babel/Gulp，它可以使用ECMA6函數。但是，我也有幾個 - 已經測試和驗證 - 用React編寫的控件。Javascript/React（與Gulp/Babel） - 無法導入

從一些基本的東西開始，我試圖引用一個例子並在我的視圖中呈現它。但是，我總是在瀏覽器中收到「No React-DOM」（或者如果我正在嘗試將其導入到我的主腳本中，則爲「No React」）。我在這裏錯過了什麼？

ReactTest.js（節選，僅示出一些代碼）

import React from 'react'; 

let MNMLogo = 'http://www.mercurynewmedia.com/images/default-source/logos/mercury-logo-circle-201x201.png'; 

class SimpleExample extends React.Component { 
    // React components are simple functions that take in props and state, and render HTML 
    render() { 
     return (
      <div> 
      ... 
      </div> 
     ); 
    } 
}

出口默認SimpleExample;

主要腳本（從我建立視圖）

import ReactDOM from 'react-dom'; 

var buildPage = function (auiUserSelectOptions) { 
    ... 

    ReactDOM.render(<SimpleExample />, document.getElementById("ReactTest")); 
};

的package.json

"dependencies": { 

}, 
"devDependencies": { 
    "babel": "^6.23.0", 
    "babel-preset-es2015": "^6.24.0", 
    "babel-preset-react": "^6.0.15", 
    "babel-register": "^6.24.0", 
    "gulp": "gulpjs/gulp#4.0", 
    "gulp-babel": "^6.1.2", 
    "gulp-debug": "^3.1.0", 
    "gulp-if": "^2.0.2", 
    "gulp-plumber": "^1.1.0", 
    "gulp-rename": "^1.2.2", 
    "gulp-uglify": "^2.1.2", 
    "lazypipe": "^1.0.1", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1" 
}, 
"engines": { 
    "node": "^6.9.0", 
    "yarn": "^0.21.3" 
},

我的看法「sucess.vm」（Velocity模板）

<html> 
<head> 
    <title>$i18n.getText("wfenhance.library-management.title")</title> 
    <meta name="decorator" content="atl.admin"> 
</head> 
... 

<div id="ReactTest"></div> 

</body> 
</html>

來源

2017-07-19 CuttingWide

您需要使用Webpack或Browserify等模塊打包程序，才能在應用程序中使用import。 Babel確實會將import轉換爲require，但瀏覽器無法使用require模塊。

我的建議是使用Webpack，因爲這是目前最成熟和最流行的打包商。在這種情況下，您也不需要使用Gulp。

的package.json

... 
"scripts": { 
    "watch": "webpack --progress --watch --display-error-details" 
} 
"dependencies": { 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1"  
}, 
"devDependencies": { 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.1.1", 
    "babel-preset-es2015": "^6.24.0", 
    "babel-preset-react": "^6.24.0", 
    "babel-register": "^6.24.0", 
    "webpack": "^3.3.0" 
}, 
"engines": { 
    "node": "^6.9.0", 
    "yarn": "^0.21.3" 
}, 
...

webpack.config.js

（我猜你的源文件都在裏面/src，並建立輸出到/build）

const path = require('path'); 

module.exports = { 
    entry: ["src/js/main.jsx"], // The main script entry 
    output: { 
    path: path.resolve(__dirname, "build"), 
    filename: "js/bundle.js", 
    publicPath: "/" 
    }, 

    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     include: path.resolve(__dirname, "src"), 
     use: 'babel-loader' 
     } 
    ] 
    }, 

    resolve: { 
    modules: ["node_modules", path.resolve(__dirname, "src")], 
    extensions: [".js", ".jsx"], 
    }, 
}

用npm run watch

開始項目

來源

2017-07-19 14:39:45

Javascript/React（與Gulp/Babel） - 無法導入

回答

相關問題