Неожиданное свойство __source в скомпилированном JSX

Question

У меня есть странная проблема. Когда я пытаюсь скомпилировать код React с Babel 6, код JSX компилируется со ссылками на исходный файл. Вот моя настройка. Я установил babel-cli глобально, затем я также установил babel-preset-es2015 и babel-preset-react. Наконец, я обновил .babelrc для ссылки на эти пресеты, как это:

{ 
    "presets": ["react", "es2015"] 
} 

и я добавил скрипт сборки в мой файл package.json:

{ 
    "name": "my-module", 
    "devDependencies": { 
    "babel-cli": "^6.1.4", 
    "babel-preset-es2015": "^6.1.4", 
    "babel-preset-react": "^6.1.4" 
    }, 
    "scripts": { 
    "build": "babel assets/scripts/main.jsx --out-file assets/scripts/main.js" 
    } 
} 

Но когда я запускаю сценарий сборки. что-то странное. Вот часть сценария источника, который на самом деле от React урока:

var CommentForm = React.createClass ({ 

    handleSubmit: function(e) { 
    e.preventDefault(); 
    var author = this.refs.author.value.trim(); 
    var text = this.refs.text.value.trim(); 
    if (!text || !author) { 
     return; 
    } 
    this.props.onCommentSubmit({author: author, text: text}); 
    this.refs.author.value = ''; 
    this.refs.text.value = ''; 
    return; 
    }, 

    render: function() { 
     return (
     <form className="commentForm" onSubmit={this.handleSubmit}> 
      <input type="text" placeholder="Your name" ref="author" /> 
      <input type="text" placeholder="Say something..." ref="text" /> 
      <input type="submit" value="Post" /> 
     </form> 
    ); 
    } 
}); 


ReactDOM.render(
    <CommentBox url="test.json" pollInterval={2000} />, 
    document.getElementById('content') 
); 

Когда я запускаю сценарий сборки, я получаю это скомпилированный код для этого фрагмента:

var CommentForm = React.createClass({ 
    displayName: 'CommentForm', 

    handleSubmit: function handleSubmit(e) { 
     e.preventDefault(); 
     var author = this.refs.author.value.trim(); 
     var text = this.refs.text.value.trim(); 
     if (!text || !author) { 
     return; 
     } 
     this.props.onCommentSubmit({ author: author, text: text }); 
     this.refs.author.value = ''; 
     this.refs.text.value = ''; 
     return; 
    }, 

    render: function render() { 
     return React.createElement(
     'form', 
     { className: 'commentForm', onSubmit: this.handleSubmit, __source: { 
       fileName: '../../../assets/scripts/main.jsx', 
       lineNumber: 105 
      } 
     }, 
     React.createElement('input', { type: 'text', placeholder: 'Your name', ref: 'author', __source: { 
       fileName: '../../../assets/scripts/main.jsx', 
       lineNumber: 106 
      } 
     }), 
     React.createElement('input', { type: 'text', placeholder: 'Say something...', ref: 'text', __source: { 
       fileName: '../../../assets/scripts/main.jsx', 
       lineNumber: 107 
      } 
     }), 
     React.createElement('input', { type: 'submit', value: 'Post', __source: { 
       fileName: '../../../assets/scripts/main.jsx', 
       lineNumber: 108 
      } 
     }) 
    ); 
    } 
}); 

ReactDOM.render(React.createElement(CommentBox, { url: 'test.json', pollInterval: 2000, __source: { 
     fileName: '../../../assets/scripts/main.jsx', 
     lineNumber: 116 
    } 
}), document.getElementById('content')); 

Как вы можете видеть, скомпилированный скрипт фактически содержит ссылки на исходный файл для кода JSX. JSX не компилируется должным образом для Javascript.

Кажется, что я делаю все правильно, и при компиляции кода ошибки не возникает, но JSX не скомпилирован должным образом. Что я делаю не так? Любая помощь или руководство очень ценится.

Answer 1

__sourcehas been added в качестве специального свойства для реагирования. This is the Babel plugin, который автоматически добавляет это свойство.

Возможно, это было сделано для улучшения информации об отладке. Преобразование добавляет их автоматически, но они не должны появляться в производственных сборках.

См the documentation как определять среду:

Вы можете использовать опцию ENV установить конкретные варианты, когда в определенной среде:

{ 
    "env": { 
    "production": { 
     "plugins": ["transform-react-constant-elements"] 
    } 
    } 
} 

окр key будут взяты из process.env.BABEL_ENV, когда это не доступно, тогда он использует process.env.NODE_ENV, если даже это не доступно, по умолчанию оно равно "development".

Вы можете установить эту переменную среды следующим образом:

Unix

# at the start of a command 
$ BABEL_ENV=production YOUR_COMMAND_HERE 

# or as a separate command 
$ NODE_ENV=production 
$ YOUR_COMMAND_HERE 

Windows,

$ SET BABEL_ENV=production 
$ YOUR_COMMAND_HERE 

---

Похоже, что я делаю все правильно, и re не является ошибкой при компиляции кода, но JSX не скомпилирован должным образом.

Не знаете, почему вы считаете, что это не скомпилировано должным образом, это так.