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

Question

I'm developing a plugin for Atlassians JIRA system where I want to provide some advanced user controls. 我正在为Atlassians JIRA系统开发插件，我想在其中提供一些高级用户控件。 I already tried around with implementing ES2015/Babel/Gulp which works - I can use ECMA6-functions with that build. 我已经尝试实现有效的ES2015 / Babel / Gulp-我可以在该版本中使用ECMA6函数。 However, I also have several - already tested and validated - controls written in React available. 但是，我还可以使用React中编写的几个（已经过测试和验证）控件。

To start with something basic, I tried to reference an example and render it in my view. 首先，我尝试引用一个示例并将其呈现在我的视图中。 However, I'm always getting "No React-DOM" in the browser (or "No React" if I'm trying to import it in my main script). 但是，我总是在浏览器中得到“ No React-DOM”（如果试图在主脚本中导入它，则为“ No React”）。 What I'm missing here? 我在这里想念的是什么？

ReactTest.js (Excerpt, showing only some code) 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>
        );
    }
}

export default SimpleExample; 导出默认的SimpleExample;

The main script (from where I building the view) 主脚本（从此处构建视图）

import ReactDOM from 'react-dom';

var buildPage = function (auiUserSelectOptions) {
    ...

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

Package.json 的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"
},

My view "sucess.vm" (velocity template) 我的视图“ 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>

Answer 1

You will need to use a module bundler like Webpack or Browserify to be able to use import inside your application. 您将需要使用Webpack或Browserify之类的模块捆绑器，才能在应用程序内部使用import 。 Babel will indeed transpile import to require but a browser is not able to require modules. Babel确实会转换import require但浏览器无法require模块。

My recommendation is to use Webpack as this is currently the most mature and popular bundler. 我的建议是使用Webpack，因为它是目前最成熟和最受欢迎的捆绑器。 You will also not need to use Gulp in this case. 在这种情况下，您也不需要使用Gulp。

package.json 的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 webpack.config.js

(I'm guessing your source files are inside /src and build output will go to /build ) （我猜您的源文件在/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"],
  },
}

Start the project with npm run watch 使用npm run watch启动项目

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

问题描述

1 个解决方案

解决方案1
0 2017-07-19 14:39:45

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

问题描述

1 个解决方案

解决方案1 0 2017-07-19 14:39:45

解决方案1
0 2017-07-19 14:39:45