我已经安装了stage-2
,我发现它应该让这个工作。但是,当我构建项目时,它无法正常工作。我将添加我的:
.babelrc
webpack.config.js
gulpfile.js
package.json
让你看看我在做什么。文件将按顺序排列。
{
"presets": ["es2015", "react", "stage-3", "stage-0", "stage-1", "stage-2", "env"],
"plugins": ["transform-object-rest-spread"]
}
var webpack = require('webpack');
var path = require('path');
var CommonsChunkPlugin = new require('webpack/lib/optimize/CommonsChunkPlugin');
var chunks = ['app'];
var config = require('./package.json');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
path: __dirname + '/dist',
filename: 'bundle/[name].js',
sourceMapFilename: 'bundle/[name].map'
},
node: {
fs: 'empty'
},
devtool: '#source-map',
plugins:
process.env.NODE_ENV === 'production'
? [
new CommonsChunkPlugin({
name: 'commons',
chunks: chunks
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
warnings: false,
drop_console: true
}
})
]
: [
new CommonsChunkPlugin({
name: 'commons',
chunks: chunks
})
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'env', 'stage-2']
}
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
query: {
name: '[name].[ext]',
outputPath: 'images/',
publicPath: config.server ? '/' : 'dist/',
useRelativePath: false
}
}
]
}
};
var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var gp_concat = require('gulp-concat');
var gp_rename = require('gulp-rename');
var gp_uglify = require('gulp-uglify');
var less = require('gulp-less');
var to5 = require('gulp-6to5');
var path = require('path');
gulp.task('less', function() {
return gulp
.src('./assets/style.less')
.pipe(
less({
paths: [path.join(__dirname, 'less', 'includes')]
})
)
.pipe(gulp.dest('./assets/css'));
});
gulp.task('css', ['less'], function() {
return gulp
.src([
'./assets/css/bootstrap.css',
'./assets/css/style.css',
'./assets/css/swiper.css',
'./assets/css/dark.css',
'./assets/css/font-icons.css',
'./assets/css/animate.css',
'./assets/css/magnific-popup.css',
'./assets/css/responsive.css',
'./assets/css/custom.css'
])
.pipe(minifyCSS())
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
.pipe(gp_concat('style.min.css'))
.pipe(gulp.dest('./dist/css/'));
});
gulp.task('copy-fonts', function() {
return gulp.src(['./assets/css/fonts/**']).pipe(gulp.dest('./dist/css/fonts/'));
});
gulp.task('style', ['css', 'copy-fonts'], function() {});
gulp.task('js', function() {
return gulp
.src(['./assets/js/jquery.js', './assets/js/plugins.js', './assets/js/functions.js', './assets/js/custom.js'])
.pipe(gp_concat('vendor.min.js'))
.pipe(gulp.dest('./dist/js/'))
.pipe(gp_rename('vendor.min.js'))
.pipe(gp_uglify())
.pipe(gulp.dest('./dist/js/'));
});
gulp.task('es6-es5', ['js'], function() {
return gulp
.src(['./src/*/**.js', './src/*/*/**.js'])
.pipe(to5())
.pipe(gulp.dest('./dist/es5/'));
});
gulp.task('watch', function() {
gulp.watch(['./src/*/**.js', './src/*/*/**.js', './assets/js/**.js'], ['es6-es5']);
});
gulp.task('prod', ['style', 'es6-es5'], function() {});
gulp.task('default', ['es6-es5', 'watch'], function() {});
{
"name": "ghost-blog",
"version": "0.0.0",
"server": false,
"private": true,
"scripts": {
"dev": "concurrently \"webpack -w\" \"turbo devserver\"",
"clean": "rimraf ./dist/*",
"build": "npm run clean && set NODE_ENV=production && webpack && gulp prod",
"postinstall": "npm run build"
},
"dependencies": {
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"bluebird": "latest",
"body-parser": "latest",
"cheerio": "latest",
"concurrently": "^3.5.0",
"cookie-parser": "latest",
"debug": "latest",
"dotenv": "latest",
"file-loader": "latest",
"firebase": "latest",
"moment": "latest",
"react": "^16.0.0",
"react-bootstrap": "^0.31.3",
"react-dom": "latest",
"react-dropzone": "^4.2.0",
"react-player": "^0.25.2",
"react-redux": "latest",
"react-router-dom": "^4.2.2",
"react-time": "^4.3.0",
"redux": "latest",
"redux-thunk": "latest",
"stripe": "latest",
"superagent": "latest",
"sweetalert2": "^6.10.3",
"turbo360": "^1.4.69",
"webpack": "latest"
},
"devDependencies": {
"babel-core": "latest",
"babel-loader": "latest",
"babel-preset-es2015": "latest",
"babel-preset-react": "latest",
"json-loader": "latest",
"gulp": "latest",
"gulp-autoprefixer": "latest",
"gulp-6to5": "latest",
"gulp-concat": "latest",
"gulp-less": "latest",
"gulp-minify-css": "latest",
"gulp-rename": "latest",
"gulp-uglify": "latest",
"chai": "latest",
"chai-http": "latest",
"nodemon": "latest",
"mocha": "latest",
"mocha-jscs": "latest",
"mocha-jshint": "latest",
"rimraf": "latest"
},
"functions": {
"turbo360": "latest"
},
"babel": {
"presets": ["es2015", "react", "stage-2"]
},
"deploy": ["index.html", "dist"],
"app": "59e0c137221d130012ee41dc"
}
答案 0 :(得分:2)
堆栈跟踪显示它在Gulp中是一个错误,因为Webpack部分没有显示错误。问题是你正在使用
var to5 = require('gulp-6to5');
这根本不是巴别塔,但巴贝尔的旧版本称为“6to5”。如果您将其更改为使用gulp-babel
并安装它,那么事情应该有效。
根据您发布的配置,您可以将内容减少到
{
"presets": ["env", "react", "stage-0"]
}
并使用该配置,您也可以删除
query: {
presets: ['react', 'es2015', 'env', 'stage-2']
}
来自您的Webpack配置,因为它已经在.babelrc
。
如果对象休息/传播是您计划使用的唯一实验性功能,您也可以
{
"presets": ["env", "react"],
"plugins": ["transform-object-rest-spread"]
}