Javascript/React（Gulp/Babelと一緒に） - インポートできません

高度なユーザーコントロールを提供したいAtlassian 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

アプリケーション内でimportを使用できるようにするには、WebpackやBrowserifyのようなモジュールバンドラを使用する必要があります。 Babelは実際にはimport〜requireになりますが、ブラウザではrequireモジュールにはアクセスできません。

ウェブパックを使用することをお勧めします。これは現在、最も成熟した人気のバンドラーです。この場合、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と一緒に） - インポートできません

答えて

関連する問題