Browserify working with grunt ReacjJS and yii2 vendor path
Background
I'm trying to setup a Yii2 project with Browserify to manage JS dependancies. As Yii2 places JS and CSS dependancies in the vendor/bower directory, i'm trying to configure Browserify to use this as the include path for vendor dependancies.
I have a Grunt task setup to run my js build.
Problem
When I try to compile my js files using the Grunt task I am getting an error trying to find React (the first include in my js project).
Error: Cannot find module 'react' from '{my-working-directory}/modules/contact/asset/js'
Code
I have React installed (bower install) and available in my vendor/bower directory. My project JS src files i'm trying to build are located in modules/contact/asset/js/ . In my JS files i'm including React at the top of the file.
modules/contact/asset/js/main.jsa
var React = require('react');
var component = React.createClass({
render: function() {
...
}
});
...
I have setup my Grunt browserify task with the include paths so that browserify knows how to find my includes, I have additionally added the react transform so that the JSX gets compiled into js.
Gruntfile.js
...
browserify: {
options: {
transform: [ require('grunt-react').browserify ],
browserifyOptions: {
paths: [
'./vendor/bower/',
'./modules/contact/asset/js/'
]
}
},
client: {
src: [
'./modules/contact/asset/js/*.js'
],
dest: './modules/contact/web/js/main.min.js'
}
},
...
Question
Why is browserify not able to find react or other includes?
You can't and should't access to vendor directory from web. If your website loaded from web folder, then you can only access only files and folders in web directory.
You can use AssetBundle to register scripts from vendor/bower directory:
class ReactAsset extends AssetBundle
{
public $sourcePath = '@bower';
public $js = [
'react/react.js'
];
}
See more in documentation.
链接地址: http://www.djcxy.com/p/52108.html上一篇: Grunt添加多个输入/输出目录