巴貝爾和reactjs：如何使用es2015風格進口

我是新來的JavaScript和JavaScript構建腳本，我試圖構建一個「面向未來」的構建腳本，用於構建ReactJS/Redux應用程序。我在導入javascript文件之間工作時遇到問題。巴貝爾和reactjs：如何使用es2015風格進口

我的問題是什麼是推薦的方法來添加對es2016風格的導入語句的支持？

正如我一直試圖讓這個工作，這些都是在我的腦海裏滾動的問題和意見，幫助顏色我來自哪裏。

我剛剛得到了一點更舒服的Gulp。是否可以使用Gulp，Babel和npm來添加對es2016風格的導入語句的支持？
我想知道如果Gulp仍然是推薦的方式去建立JavaScript捆綁，或者我應該學習WebPack。
過去，我曾經使用Browserify來包含其他JavaScript文件，但是我聽說有人提到您可以完成Browserify對純npm的處理，並且Browserify可能會失寵。
我注意到很多使用WebPack的ReactJS示例。我不確定WebPack適合在哪裏或者是否有必要。我想知道WebPack是否取代Browserify，如果我需要WebPack，或者如果沒有它，我可以做到。
我寧願使用推薦的任何導入語法。我相信Browserify使用require（）和es2015語法使用「import ... from」。我想知道如果「import ... from」是用於導入的推薦語法，或者我應該使用其他的東西。
我一直在嘗試使用Babel 6來使用es2015風格的代碼。我注意到它沒有預處理導入語句，我想我在某處讀到Babel 6刪除了對導入語句的支持。我想知道用什麼來代替預處理導入語句。
我會盡量減少構建基本項目的配置數量（點文件等）。

下面是一個簡單的例子，我一直在嘗試使用Gulp工作。目前，當Gulp運行時，會創建一個包，但導入語句似乎不起作用。當我嘗試加載index.html時，所有內容看起來都一起被拼接在一起，並且我得到了javascript錯誤。

更多的package.json

{ 
    "name": "test_jsx", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-cli": "^6.14.0", 
    "babel-plugin-transform-react-jsx": "^6.8.0" 
    }, 
    "devDependencies": { 
    "babel-preset-es2015": "^6.14.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-stage-0": "^6.5.0", 
    "gulp": "^3.9.1", 
    "gulp-babel": "^6.1.2", 
    "gulp-cli": "^1.2.2", 
    "gulp-concat": "^2.6.0", 
    "gulp-print": "^2.0.1", 
    "gulp-sourcemaps": "^1.6.0" 
    } 
}

更gulpfile.js

var gulp = require("gulp"); 
var print = require('gulp-print'); 
var sourcemaps = require("gulp-sourcemaps"); 
var babel = require("gulp-babel"); 
var concat = require("gulp-concat"); 

const paths = { 
    src: 'src/**/*js', 
    dest: 'build' 
} 

gulp.task("default", function() { 
    return gulp.src(paths.src) 
    .pipe(print()) 
    .pipe(sourcemaps.init()) 
    .pipe(babel({ presets: ['react', 'es2015', ]})) 
    .pipe(concat("bundle.js")) 
    .pipe(sourcemaps.write(".")) 
    .pipe(gulp.dest("dist")); 
});

更多的src/test.js

// This import statement is what I'm trying to get working. 
import { square } from './lib'; 

var profile = <div> 
    <img src="avatar.png" className="profile" /> 
    <h3>{[user.firstName, user.lastName].join(' ')}</h3> 
</div>;

更多的src/lib.js

// This is just a example function that I want to try to import 
export function square(x) { 
     return x * x; 
}

更多的index.html

<script src="dist/bundle.js"></script> 
TEST

打造步驟

npm install 
./node_modules/.bin/gulp

來源

2016-09-23 Joe J

您可以使用的WebPack或browserify建立你的包，但他們都會借力巴貝爾提供ES6支持。我不確定你在哪裏讀到巴別塔6刪除了進口聲明 - 我使用巴別塔6並且沒有這樣的問題。你也可以用gulp來構建捆綁包，但是我發現它更多工作，並且往往難以維護。但是，你可能會在這裏得到很多有見地的答案。

最近Facebook提供了一個工具，用於啓動React應用程序而無需配置構建工具：Create React App。你可能想嘗試一下Github上的可用樣板啓動器，除非你喜歡修改構建腳本。它不太靈活，但是如果你想減少配置的數量，它會完成這項工作。

來源

2016-09-23 13:29:09

巴貝爾和reactjs：如何使用es2015風格進口

回答

相關問題