Javascript/React（使用 Gulp/Babel） - 无法导入答案

【问题标题】：Javascript/React (with Gulp/Babel) - can't importJavascript/React（使用 Gulp/Babel） - 无法导入
【发布时间】：2017-12-24 13:33:02
【问题描述】：

我正在为 Atlassians JIRA 系统开发一个插件，我想在其中提供一些高级用户控件。我已经尝试过实现 ES2015/Babel/Gulp，它可以工作——我可以在该构建中使用 ECMA6 函数。不过，我也有几个可用的——已经测试和验证的——用 React 编写的控件。

首先，我尝试引用一个示例并将其呈现在我的视图中。但是，我总是在浏览器中得到“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"));
};

包.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”（速度模板）

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

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

</body>
</html>

【问题讨论】：

标签： javascript reactjs jira

【解决方案1】：

您需要使用 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启动项目

【讨论】：