2017-08-17 1 views
0

Selon le this, la déclaration d'importation doit être acceptée (en fait, pas, voir les commentaires) par n'importe quel navigateur, mais quand j'essaie de l'utiliser, le chrome cède le mauvais jeton, erreur de syntaxe.Ce qui doit utiliser la directive d'importation en javascript

Il s'agit de l'application react. Mon html ressemble

<!DOCTYPE html> 
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]--> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>CODETutorial Mean seed</title> 
    <script src="bower_components/jquery/dist/jquery.js"></script> 
    <script src="bower_components/react/react.js"></script> 
    <script src="bower_components/react-dom/dist/react-dom.js"></script> 
    <script src="bower_components/react-router-dom/index.js"></script> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <div id="root"> 
    <div id="navbar"></div> 
    </div> 
    <script src="dist/navbar.js"></script> 
</body> 
</html> 

et dans l'importation et l'utilisation d'instructions navbar.jsx Link:

import { Link } from 'react-router-dom'; 

var NavLink = React.createClass({ 
    render: function(){ 
    return(
     <li className={(this.props.active ? "active" : "")}> 
     <Link to={this.props.linkTo}>{this.props.text}</Link> 
     </li> 
    ); 
    } 
}); 

... 

Quel est le problème avec l'importation?

+1

En fait, selon votre lien, 'import'" commence tout juste à être implémenté dans les navigateurs nativement ". Si vous suivez les liens, vous verrez qu'ils ne sont pas très bien supportés (par exemple, Chrome le supporte uniquement si vous activez des fonctionnalités expérimentales). – Kryten

+0

Oui, merci d'avoir signalé cela. Y a-t-il un comand babel pour transpiler les importations? – Juriy

Répondre

0

Vous aurez toujours besoin d'utiliser babel, ou passer à travers quelques cerceaux pour réellement faire fonctionner les modules dans votre code. Si vous ne voulez pas utiliser babel, vous pouvez suivre le guide ici: https://blogs.windows.com/msedgedev/2017/08/10/es-modules-node-today/amp/?utm_content=bufferb6a65&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

+0

J'utilise babel comme compilateur (transpiler): babel src -d dist -w – Juriy

+0

Ce n'est pas un JavaScript natif en fait, je vais devoir utiliser babel. – Juriy