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） - 无法导入

回答

相关问题