Created a project. in pacakge.json indicated the following dependencies:

"scripts": { "start": "gulp" }, "browserify": { "transform": [ [ "babelify", { "presets": [ "es2015", "react" ] } ] ] }, "private": true, "devDependencies": { "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "babel-preset-es2015": "^6.16.0", "babel-preset-react": "^6.16.0", "babelify": "^7.2.0", "browser-sync": "^2.11.0", "browserify": "^13.0.0", "gulp": "^3.9.1", "gulp-notify": "^2.2.0", "gulp-util": "^3.0.1", "gulp-webserver": "~0.9.1", "pretty-hrtime": "^1.0.1", "require-dir": "^0.3.0", "underscore": "^1.8.3", "vinyl-source-stream": "^1.0.0", "watchify": "^3.6.1" }, "dependencies": { "bootstrap": "^3.3.6", "es6-promise": "^3.2.1", "gulp-autoprefixer": "^3.1.0", "gulp-clean-css": "^2.0.11", "gulp-concat": "^2.6.0", "gulp-minify-css": "^1.2.4", "react": "^15.0.1", "react-addons-css-transition-group": "~15.3.1", "react-bootstrap": "^0.30.0-rc.2", "react-bootstrap-datetimepicker": "0.0.22", "react-bootstrap-table": "^2.3.8", "react-breadcrumbs": "^1.3.16", "react-dom": "^15.0.1", "react-notifications": "~1.3.0", "react-router": "^2.8.1", "react-tap-event-plugin": "^1.0.0" }

gulpfile:

 var babelify = require('babelify'); require('es6-promise').polyfill(); var requireDir = require('require-dir'); requireDir('./gulp/tasks', { recurse: true });

gulp-config:

 var dest = './build', src = './src'; module.exports = { browserSync: { server: { // We're serving the src folder as well // for sass sourcemap linking baseDir: [dest, src] }, files: [ dest + '/**' ] }, markup: { src: src + "/frontend/**", dest: dest }, browserify: { // Enable source maps debug: true, // A separate bundle will be generated for each // bundle config in the list below bundleConfigs: [{ entries: src + '/frontend/js/app.js', dest: dest, outputName: 'app.js' }], extensions: ['.js'], } };

There is a code for the component:

 import React from 'react'; import {Router, Route, IndexRoute, Link, hashHistory} from 'react-router' import {Component} from 'react' import {render} from 'react-dom' import Home from './Home'; import {NotificationContainer, NotificationManager} from 'react-notifications'; const App = React.createClass({ render: function() { return ( <div className="row"> <div className="row"> <b>Hello I'am reaaact!</b> </div> <div className='app-container'> <hr/> {this.props.children} </div> </div> ) } }); render((<Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={Home}/> </Route> </Router> ), document.getElementById('app'));

I collect with the npm start command, gulp collects everything fine, but when launched in the browser it swears at imports. there is a node_modules folder with installed react-modules, however, there is a feeling that he does not see them and cannot import the necessary components of the react-library. how to solve this problem?

  • one
    Nnda debug. Obviously your picker doesn't chew es6 imports. But as far as I understood from a quick glance at the docks, babelify should work it out (I don’t know for sure, I'm from the webpack sect). Generally es6, only imports fall off? - Duck Learns to Take Cover
  • Imports go at the beginning of the code, I didn’t look further, I thought of dealing with them first. I took the base on github.com/callemall/material-ui-browserify-gulp-example but made some changes - Iga
  • one
    The fact is that the task of understanding the syntax of modules lies on the collector or the plugin on the collector (browserify / babelify), the task of converting es6 to es5 is on the transpiler (babel). Plus, you don’t directly write a galp task through another layer. I would try to understand - that does not work. Tusk on transpay (transpiling and import will collapse) or plug-in on modules (only imports will fall) - Duck Learns to Take Cover
  • one
    Well, write some file with the es6-design like the arrow function and see what happens in the bundle. If instead of arrows in a bundle a valid es5 code, then Babel worked and you need to dig in the direction of improper use / connection of babelify, if you didn’t change anything leaving the arrows, then the transpiler didn’t work finally and you can search for a jamb in the config task - Duck Learns to Hide
  • one
    I would have done so cleanly to debug, but note that I was passing by at all, I have another zoo on the assembly) - Duck Learns to Take Cover

1 answer 1

Update the node to at least 6.4

Versions of nodejs differed from @Iga on the host machine and on the virtual one, he compiled js from the host machine where the node version is lower and therefore various funny errors occurred. Not all libraries from the specified package.json are correctly built using a node with a version below 6.4

  • Gulp does not work on younger versions? Or maybe some of his plugins do not work? - Dmitriy Simushev