Не могу настроить Browserify в React

360

07 января 2017, 15:58

В общем, решил установить последний React (15.4.1) по инструкции с оф. сайта. Сразу скажу, что такие вещи как Babel, Browserify и т.д. для меня тёмный лес, я никогда не работал с этим. React, Angular, Ember и т.д. для меня также не знакомы. С помощью Grunt (знаю поверхностно) поставил React, React Dom и т.д., в общем все вроде необходимое. Вот package.json и Gruntfile.js

{
"name": "react-test",
  "version": "0.1.0",
  "devDependencies": {
    "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babelify": "^7.3.0",
    "grunt": "~0.4.5",
    "grunt-babel": "^6.0.0",
    "grunt-browserify": "^5.0.0",
    "grunt-contrib-watch": "^1.0.0",
    "load-grunt-tasks": "^3.5.2"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  }
}
module.exports = function(grunt) {
    // 1. Вся настройка находится здесь
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        path: 'app',
        babel: {
            options: {
                sourceMap: true,
                presets: ['babel-preset-es2015', 'babel-preset-react']
            },
            dist: {
                files: {
                    '<%= path %>/dist/users.js': '<%= path %>/js/users.js',
                    '<%= path %>/dist/user.js': '<%= path %>/js/user.js'
                }
            }
        },
        browserify: {
            dist: {
                files: {
                    '<%= path %>/dist/users.js': '<%= path %>/dist/users.js',
                    '<%= path %>/dist/user.js': '<%= path %>/dist/user.js'
                }
            }
        },
        watch: {
            babel: {
                files: ['<%= path %>/js/users.js', '<%= path %>/js/user.js'],
                tasks: ['babel', 'browserify']
            }
        }
    });
    // 3. Тут мы указываем Grunt, что хотим использовать этот плагин
    // grunt.loadNpmTasks('grunt-contrib-watch');
    require('load-grunt-tasks')(grunt);
    // 4. Указываем, какие задачи выполняются, когда мы вводим «grunt» в терминале
    grunt.registerTask('default', ['watch']);
};

Далее index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
</head>
<body>
    <div></div>
    <script src="dist/user.js"></script>
</body>
</html>

Для теста создал users.js

var users = [{
    name: 'Serg'
}];
export {users};

и user.js

import users from './users';
console.log(users);
[1, 2, 3].map(n => n + 1);

И в консоль мне выводится не массив, экспортируемый в users.js а пустой объект (map просто для теста Babel). Прочитал очень много статей, но так и не разобрался. Скорей всего проблема именно с Browserify. Вот скомпилированный users.js

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
    value: true
});
var users = [{
    name: 'Serg'
}];
exports.users = users;

},{}]},{},[1]);

А вот user.js

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var _users = require('./users');
var _users2 = _interopRequireDefault(_users);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.log(_users2.default);
[1, 2, 3].map(function (n) {
  return n + 1;
});

},{"./users":2}],2:[function(require,module,exports){
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
    value: true
});
var users = [{
    name: 'Serg'
}];
exports.users = users;

},{}]},{},[1]);
},{}]},{},[1]);

Структура