我整个周末都在寻找答案。无济于事。我已经使用elixir 6进入了webpack rabbit hole 并返回到browserify。
这里的要点很有希望：https://gist.github.com/sagalbot/6150d4f536af7b4c4f9a9879856e595d
// Default babel presets are ['es2015', 'react']
// https://babeljs.io/docs/plugins/preset-stage-2/
elixir.config.js.babel.options.presets = ['es2015', 'stage-2'];
但elixir.config.js.babel未定义 - 为什么？是否有重构？我无法让它发挥作用。
我想做的就是启用stage-2。 （https://babeljs.io/docs/plugins/preset-stage-2/）
我的gulp文件
require("laravel-elixir-remove");
require("laravel-elixir-bless");
require("laravel-elixir-browserify-official");
//require('laravel-elixir-scss-lint'); // this doesn't work under elixir ^6.0.0-10
require('elixir-typescript');
require("./gulp/ts.lint");
var elixir = require("laravel-elixir");
var jsonminify = require("jsonminify");
var config = require("./gulp/parse.config");
var argv = require("yargs").argv;
var fs = require("fs");
elixir.config.js.babel.enabled = true;
// grab the JSON file and make a copy of it.
// strip out the comments from the JSON file using jsonminify
var ORIGINAL_CONFIG = config.getJSON("./build.config.json");
//set the replacement section of the JSON file to modify the remainder of the JSON
config.setConfigKey("replacements");
config.parse(ORIGINAL_CONFIG);
elixir = config.setElixirPaths(elixir);
/*======================================================================================*/
// BROWSERIFY OPERATIONS
/*======================================================================================*/
var BROWSERIFYCONFIG = elixir.config.js.browserify;
BROWSERIFYCONFIG.plugins.push({
name: "tsify", options: {
target: "es5",
experimentalDecorators: true,
babelify: {
extensions: [".tsx", ".ts"]
}
}
});
// can't get this working, I can't enable the spread/rest operator.
// elixir.config.js.browserify.transformers
// .find(transformer => transformer.name === 'babelify')
// .options.plugins = [
// 'syntax-object-rest-spread',
// 'transform-object-rest-spread'
// ];
BROWSERIFYCONFIG.plugins.push(
{
name: "factor-bundle",
options: {
// generate js files from the input, the order is crucial
outputs: config.get("browserify.in", "js")
}
}
);
// this is undefined. When was the babel property removed from the elixir config object?!!
//console.log(elixir.config.js.babel);
//elixir.config.js.babel.options.presets = ['es2015', 'stage-2'];
/*======================================================================================*/
// BUILD
/*======================================================================================*/
elixir(build);
function build(mix) {
if (!argv.hasOwnProperty("scss")) {
// if there is no public dir, create it, as browserify expects
if (!fs.existsSync(config.get("replacements.outPath"))) {
fs.mkdirSync(config.get("replacements.outPath"));
fs.mkdirSync(config.get("replacements.js"));
}
// browserify node_modules and write out
mix.browserify(
// factor all the files in order:
config.get("browserify.in", "ts"),
// and generate one file that is common to all of them:
config.get("browserify.out", "js")
);
}
//
// if (!argv.hasOwnProperty("js")) {
//
// // concatenate js files first
mix.scripts(
config.get("concat.in", "js"),
config.get("concat.out", "js")
);
//
// //generate the css ( note we can't loop over )
// mix.sass(config.get('scss.0.in', 'scss'), config.get('scss.0.out', 'css'),{sourceComments:true})
// .sass(config.get('scss.1.in', 'scss'), config.get('scss.1.out', 'css'))
// .sass(config.get('scss.2.in', 'scss'), config.get('sass.2.out', 'css'))
// .sass(config.get('scss.3.in', 'scss'), config.get('scss.3.out', 'css'))
// .browserSync({
// files: ["**/*.css", "**/*.js", "**/*.php"],
// proxy: "website.mock",
// port: 4000,
// logPrefix: "Laravel Eixir BrowserSync"
// });
//
// if(!argv.hasOwnProperty("production")){
// mix.scssLint(config.get('sasslint.in', 'scss'));
// mix.tslint(config.get("tslint.in", "ts"), config.getJSON(config.get("tslint.rules", "json")));
// }
//
// // copy debug files over — temporary
// mix.copy(config.get('copy.0.in', 'css'), config.get('copy.0.out', 'css'))
// .copy(config.get('copy.1.in', 'css'), config.get('copy.1.out', 'css'))
// .copy(config.get('copy.2.in', 'js'), config.get('copy.2.out', 'js'))
// .copy(config.get('copy.3.in'), config.get('copy.3.out'))
// .bless(config.get('bless.0.in', 'css'), {imports: true});
// }
}
我有一个.babelrc文件
{
"presets": ["stage-2"],
"comments": true
}
这似乎被忽略了。
的package.json
{
"devDependencies": {
"alterclass": "git+https://github.com/sidouglas/alter-class#1.0",
"babel": "^6.5.2",
"babel-core": "^6.10.4",
"babel-preset-stage-2": "^6.13.0",
"babel-register": "^6.9.0",
"bootstrap-pull": "git+https://github.com/sidouglas/bootstrap-pull.git#3.0.2",
"browserify-shim": "^3.8.12",
"dot-object": "^1.4.1",
"elixir-jasmine": "0.0.4",
"gulp": "^3.9.1",
"gulp-replace-task": "^0.11.0",
"gulp-tslint": "^6.0.1",
"jasmine-fixture": "^2.0.0",
"jasmine-jquery": "^2.1.1",
"jsonminify": "^0.4.1",
"karma": "^1.1.1",
"karma-chrome-launcher": "^1.0.1",
"karma-firefox-launcher": "^1.0.0",
"karma-ios-simulator-launcher": "0.0.4",
"karma-jasmine": "^1.0.2",
"karma-safari-launcher": "^1.0.0",
"laravel-elixir": "^6.0.0-10",
"laravel-elixir-bless": "^2.0.0",
"laravel-elixir-browserify-official": "^0.1.3",
"laravel-elixir-browsersync": "^0.1.5",
"laravel-elixir-browsersync-official": "^1.0.0",
"laravel-elixir-remove": "^0.2.1",
"lodash": "^4.13.1",
"node-sass": "^3.8.0",
"retyped-bowser-tsd-ambient": "0.0.0-0",
"run-sequence": "^1.2.1",
"sass-convert": "^0.5.2",
"supplant": "^0.2.0",
"tsify": "^1.0.4",
"tslint": "^3.13.0",
"typescript": "^1.9.0-dev.20160605-1.0",
"yargs": "^4.8.0"
},
"dependencies": {
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"boilerplate": "^0.5.0",
"bootstrap": "^3.3.6",
"bootstrap-sass": "^3.3.6",
"bootstrap-select": "^1.10.0",
"bowser": "^1.4.2",
"del": "^2.2.0",
"elixir-typescript": "^2.0.0",
"factor-bundle": "^2.5.0",
"gulp-change": "^1.0.0",
"gulp-shell": "^0.5.2",
"include-media": "^1.4.5",
"jquery": "^2.2.4",
"jquery-replace-class": "0.0.1",
"lodash": "^4.14.0",
"material-kit": "git://github.com/tfsimondouglas/material-kit-bootstrap-3.git#1.1",
"nouislider": "^8.5.1",
"partition-bundle": "^2.5.0",
"redux": "^3.5.2",
"requirejs": "^2.2.0",
"riot": "^2.5.0",
"riot-ts": "git://github.com/tfsimondouglas/riot-ts.git",
"tf-modernizr": "git://github.com/tomorrowfinance/tf-modernizr.git",
"webshim": "^1.15.10",
"wnumb": "git://github.com/tannerhodges/wnumb"
},
"scripts": {
"test": "protractor protractor.conf.js",
"postinstall": "node node_modules/.bin/gulp --production",
"watch": "node node_modules/.bin/gulp watch",
"gulp": "node node_modules/.bin/gulp",
"kill": "for pid in `ps -ef | grep gulp | awk '{print $2}'` ; do kill -9 $pid ; done",
"start": "npm run watch",
"restart": "npm run kill & npm start",
"build": "node node_modules/.bin/gulp --production"
}
}
编辑29-08-2016
这是一个简单的测试：
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
// Spread properties
let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }
导致此错误：
[14:39:26] Starting 'all'...
[14:39:26] Starting 'browserify'...
{ [TypeScript error: ...path ommitted...app.ts(3,13): Error TS1180: Property destructuring pattern expected.]
message: '...path ommitted...app.ts(3,13): Error TS1180: Property destructuring pattern expected.',
fileName: '...path ommitted...app.ts',
line: 3,
column: 13,
name: 'TypeScript error' }
{ [TypeScript error: ...path ommitted...app.ts(9,17): Error TS1136: Property assignment expected.]
message: '...path ommitted...app.ts(9,17): Error TS1136: Property assignment expected.',
fileName: '...path ommitted...app.ts',
line: 9,
column: 17,
name: 'TypeScript error' }
[14:39:27] Finished 'browserify' after 547 ms
答案 0 :(得分：1)
这个问题对我有类似的帮助：
原文（c）@ michael-hsu https://stackoverflow.com/a/38194213/741782
你应该完全覆盖babelify变换器：
elixir.config.js.browserify.transformers
.find(transformer => transformer.name === 'babelify')
.options = {
presets: ['es2015', 'react', 'stage-0', 'stage-1', 'stage-2'],
plugins: ['transform-class-properties'],
};