使用瀏覽器與BroccoliJS

我試圖開始使用BroccoliJS來構建使用React框架的應用程序。我正在嘗試使用browserify來組合我正在使用的JavaScript文件，但當我嘗試在準系統應用程序上運行構建時，它會一直返回錯誤。我有一個目錄結構類似使用瀏覽器與BroccoliJS

|--app 
    |--index.js 
    |--index.html 
|--node_modules 
    |--react 
|--public 
|--styles 
    |--app.scss 
|--Brocfile.js 
|--package.json

我brocfile是一樣的東西

/* Brocfile.js */ 

var compileSass = require('broccoli-sass'); 
var funnel = require('broccoli-funnel'); 
var mergeTrees = require('broccoli-merge-trees'); 
var browserify = require('broccoli-browserify'); 

var javascript = funnel('app', { 
    srcDir: '/' 
}); 

var styles = funnel('styles', { 
    srcDir: '/' 
}); 

var appJs = browserify(javascript, { 
    entries: ['index.js'], 
    outputFile: 'app.js', 
    transform: ['reactify'] 
}); 

var appCss = compileSass([styles], 'app.scss', 'application.css'); 

module.exports = mergeTrees([appJs, appCss]);

的問題是我不斷收到錯誤的Cannot find module 'app.js'效果。

我並不過分挑剔如何最終編譯項目，因爲我對我使用的任何工具瞭解甚少，但如果可能的話，我想使用西蘭花。有沒有人有時間指出我正確的方向來實現這個目標？謝謝。

編輯：

如果有幫助，這是app.js樣子。

var React = require('react'); 

var App = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <h1>TEST</h1> 
     </div> 
    ); 
    } 
}); 

React.render(<App />, document.getElementById('app'));

來源

2015-08-29 user2027202827

我終於得到了這個工作。如果其他人遇到問題，切換到Babelify（取代反應）似乎是我能找到的最簡單的解決方案。我也決定使用fast-browserify，因爲它支持緩存。這是爲我工作的broc文件。

var mergeTrees = require('broccoli-merge-trees'); 
var compileSass = require('broccoli-sass'); 
var fastBrowserify = require('broccoli-fast-browserify'); 
var babelify = require('babelify'); 

var appJs = fastBrowserify('app', { 
    browserify: { 
    extensions: ['.js'] 
    }, 
    bundles: { 
    'assets/app.js': { 
     entryPoints: ['index.js'], 
     transform: { 
     tr: babelify 
     } 
    } 
    } 
}); 

var appCss = compileSass(['styles'], 'app.scss', '/assets/app.css'); 

module.exports = mergeTrees([appJs, appCss, 'public']);

來源

2015-09-01 02:16:48 user2027202827

我無法得到這個工作。我這樣做，而不是

Brocfile.js：

var mergeTrees = require('broccoli-merge-trees') 
var funnel = require('broccoli-funnel') 
var babel = require("broccoli-babel-transpiler") 
var browserify = require('broccoli-browserify') 
var react = require('broccoli-react') 

var js = funnel('src/js', { 
    srcDir: '/', 
    destDir: 'js' 
}) 

js = babel(js) 

js = browserify(js, { 
    entries: ['./js/main.js'], 
    outputFile: 'js/build.js' 
}) 

js = react(js, {extensions: ['js']}) 

module.exports = mergeTrees([js])

然後，在main.js我可以做

import TopNav from './components/top-nav' 
ReactDOM.render(<TopNav />, document.getElementById('top-nav-wrap'))

頂級nav.js：

var TopNav = React.createClass({ 

    render: function() { 
    return (
     <div className='top-nav'> 
     <a href='#'>one</a> 
     <a href='#'>one</a> 
     <a href='#'>one</a> 
     <a href='#'>one</a> 
     </div> 
    ); 
    } 
}) 

export default TopNav

項目樹

app/ 
    └── Brocfile.js 
    └── src/ 
     └── index.html 
    └── js/ 
     ├── mnain.js 
     ├── components/ 
      └── top-nav.js

來源

2015-10-18 03:01:35 sqram

使用瀏覽器與BroccoliJS

回答

相關問題