我正在为 Atlassians JIRA 系统开发一个插件，我想在其中提供一些高级用户控件。 我已经尝试过实现有效的 ES2015/Babel/Gulp - 我可以在该构建中使用 ECMA6 函数。 不过，我还有几个已经测试和验证过的用 React 编写的控件。
首先，我尝试引用一个示例并将其呈现在我的 View 中。 但是，我总是在浏览器中收到“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；
主脚本(从我构建 View 的地方)
import ReactDOM from 'react-dom';
var buildPage = function (auiUserSelectOptions) {
...
ReactDOM.render(<SimpleExample />, document.getElementById("ReactTest"));
};
包.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"
},
我的 View “sucess.vm”(速度模板)
<html>
<head>
<title>$i18n.getText("wfenhance.library-management.title")</title>
<meta name="decorator" content="atl.admin">
</head>
...
<div id="ReactTest"></div>
</body>
</html>
最佳答案
您将需要使用 Webpack 或 Browserify 等模块 bundler 才能在应用程序中使用import。 Babel 确实会将 import 转译为 require，但浏览器无法 require 模块。
我的建议是使用 Webpack，因为这是目前最成熟和流行的 bundler 。在这种情况下，您也不需要使用 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启动项目
关于Javascript/React(使用 Gulp/Babel)-无法导入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45187838/