将 browserify 与 BroccoliJS 结合使用
Using browserify with BroccoliJS
我正在尝试开始使用 BroccoliJS 来构建使用 React 框架的应用程序。我正在尝试使用 browserify 来组合我正在使用的 javascript 文件,但是当我尝试 运行 在准系统应用程序上构建时它一直返回错误。我的目录结构类似于
|--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'
的错误。
我对最终如何编译项目并不过分挑剔,因为我对我正在使用的任何工具都不太了解,但如果可能的话我想使用 Broccoli。有没有人有时间为我指明正确的方向以使其正常工作?谢谢。
编辑:
如果有帮助,这就是 app.js 的样子。
var React = require('react');
var App = React.createClass({
render: function() {
return (
<div>
<h1>TEST</h1>
</div>
);
}
});
React.render(<App />, document.getElementById('app'));
我终于搞定了。如果其他人遇到这个问题,切换到 Babelify(代替 reactify)似乎是我能找到的最简单的解决方案。我还决定使用 fast-browserify,因为它支持缓存。这是对我有用的 brocfile。
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']);
我无法让它工作。我这样做了
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'))
top-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
我正在尝试开始使用 BroccoliJS 来构建使用 React 框架的应用程序。我正在尝试使用 browserify 来组合我正在使用的 javascript 文件,但是当我尝试 运行 在准系统应用程序上构建时它一直返回错误。我的目录结构类似于
|--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'
的错误。
我对最终如何编译项目并不过分挑剔,因为我对我正在使用的任何工具都不太了解,但如果可能的话我想使用 Broccoli。有没有人有时间为我指明正确的方向以使其正常工作?谢谢。
编辑:
如果有帮助,这就是 app.js 的样子。
var React = require('react');
var App = React.createClass({
render: function() {
return (
<div>
<h1>TEST</h1>
</div>
);
}
});
React.render(<App />, document.getElementById('app'));
我终于搞定了。如果其他人遇到这个问题,切换到 Babelify(代替 reactify)似乎是我能找到的最简单的解决方案。我还决定使用 fast-browserify,因为它支持缓存。这是对我有用的 brocfile。
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']);
我无法让它工作。我这样做了
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'))
top-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