Related
I'm trying to run npm run development, but I got a typescript error here
let { Chunks } = require('../Chunks');
let File = require('../File');
let VueVersion = require('../VueVersion');
let AppendVueStylesPlugin = require('../webpackPlugins/Css/AppendVueStylesPlugin');
/** #typedef {import("vue").VueLoaderOptions} VueLoaderOptions */
class Vue {
/**
* Create a new component instance.
*/
constructor() {
this.chunks = Chunks.instance();
}
/**
* Register the component.
*
* #param {object} options
* #param {number} [options.version] Which version of Vue to support. Detected automatically if not given.
* #param {string|null} [options.globalStyles] A file to include w/ every vue style block.
* #param {boolean|string} [options.extractStyles] Whether or not to extract vue styles. If given a string the name of the file to extract to.
* #param {VueLoaderOptions} [options.options] Options to pass to Vue Loader
*/
register(options = {}) {
if (
arguments.length === 2 &&
typeof arguments[0] === 'string' &&
typeof arguments[1] === 'string'
) {
throw new Error(
'mix.vue() is a feature flag. Use mix.js(source, destination).vue() instead'
);
}
this.version = VueVersion.detect(options.version);
this.options = Object.assign(
{
options: null,
globalStyles: null,
extractStyles: false
},
options
);
Mix.globalStyles = this.options.globalStyles;
Mix.extractingStyles = !!this.options.extractStyles;
}
/**
* Required dependencies for the component.
*/
dependencies() {
this.requiresReload = true;
let dependencies = [
this.version === 2 ? 'vue-template-compiler' : '#vue/compiler-sfc',
this.version === 2 ? 'vue-loader#^15.9.5' : 'vue-loader#^16.1.0'
];
if (this.options.extractStyles && this.options.globalStyles) {
dependencies.push('sass-resources-loader');
}
return dependencies;
}
/**
* Override the generated webpack configuration.
*
* #param {Object} webpackConfig
*/
webpackConfig(webpackConfig) {
// push -> unshift to combat vue loader webpack 5 bug
webpackConfig.module.rules.unshift({
test: /\.vue$/,
use: [
{
loader: this._mix.resolve('vue-loader'),
options: this.options.options || Config.vue || {}
}
]
});
// Alias Vue to its ESM build if the user has not already given an alias
webpackConfig.resolve.alias = webpackConfig.resolve.alias || {};
if (!webpackConfig.resolve.alias['vue$']) {
webpackConfig.resolve.alias['vue$'] = this.aliasPath();
}
webpackConfig.resolve.extensions.push('.vue');
this.updateChunks();
}
aliasPath() {
if (this.version === 2) {
return this.options.runtimeOnly
? 'vue/dist/vue.runtime.esm.js'
: 'vue/dist/vue.esm.js';
}
return this.options.runtimeOnly
? 'vue/dist/vue.runtime.esm-bundler.js'
: 'vue/dist/vue.esm-bundler.js';
}
/**
* webpack plugins to be appended to the master config.
*/
webpackPlugins() {
let { VueLoaderPlugin } = require(this._mix.resolve('vue-loader'));
return [new VueLoaderPlugin(), new AppendVueStylesPlugin()];
}
/**a
* Update CSS chunks to extract vue styles
*/
updateChunks() {
if (this.options.extractStyles === false) {
return;
}
this.chunks.add(
'styles-vue',
this.styleChunkName(),
[/.vue$/, module => module.type === 'css/mini-extract'],
{
chunks: 'all',
enforce: true,
type: 'css/mini-extract'
}
);
}
/**
* Get the name of the style chunk.
*
* #returns {string}
*/
styleChunkName() {
// If the user set extractStyles: true, we'll try
// to append the Vue styles to an existing CSS chunk.
if (this.options.extractStyles === true) {
let chunk = this.chunks.find((chunk, id) => id.startsWith('styles-'));
if (chunk) {
return chunk.name;
}
}
return this.extractFile().relativePathWithoutExtension();
}
/**
* Get a new File instance for the extracted file.
*
* #returns {File}
*/
extractFile() {
return new File(this.extractFileName());
}
/**
* Determine the extract file name.
*
* #return {string}
*/
extractFileName() {
let fileName =
typeof this.options.extractStyles === 'string'
? this.options.extractStyles
: '/css/vue-styles.css';
return fileName.replace(Config.publicPath, '').replace(/^\//, '');
}
}
module.exports = Vue;
**package.json
{
"private": true,
"scripts": {
"development": "mix",
"hot": "mix watch --hot",
"production": "mix --production",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000"
},
"dependencies": {
"#chenfengyuan/vue-countdown": "^1.1.5",
"#mdi/light-font": "^0.2.63",
"#types/ziggy-js": "^0.9.0",
"#vue/cli-service": "^5.0.4",
"axios": "^0.21.1",
"dotenv": "^16.0.0",
"eslint": "^7.18.0",
"laravel-echo": "^1.10.0",
"lottie-player-vue": "0.0.16",
"object-to-formdata": "^4.1.0",
"pusher-js": "^7.0.2",
"qrcode": "^1.5.0",
"read-excel-file": "^5.2.28",
"sweetalert2": "^9.17.2",
"v-money": "^0.8.1",
"vee-validate": "^2.2.15",
"vform": "^1.0.1",
"vue-axios": "^2.1.5",
"vue-cli": "^2.9.6",
"vue-countdown": "^1.0.4",
"vue-excel-xlsx": "^1.2.2",
"vue-moment": "^4.1.0",
"vue-qrcode-component": "^2.1.1",
"vue-resource": "^1.5.3",
"vue-sessionstorage": "^1.0.0",
"vue-social-auth": "^1.4.9",
"vue-socket.io": "^3.0.10",
"vue2-storage": "^5.0.0",
"vuedraggable": "^2.24.3",
"vuetify": "^2.6.0",
"vuex": "^3.6.2",
"vuex-map-fields": "^1.4.1",
"ziggy": "^2.4.0",
"ziggy-js": "^1.4.3"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.12.0",
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-vue": "^0.8.0",
"#inertiajs/progress": "^0.2.7",
"#mdi/font": "^4.9.95",
"#mdi/js": "^5.9.55",
"#nuxtjs/vuetify": "^1.12.3",
"#popperjs/core": "^2.10.2",
"bootstrap": "^5.1.3",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"cross-env": "^7.0.3",
"deepmerge": "^4.2.2",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-vue": "^7.5.0",
"font-awesome": "^4.7.0",
"laravel-mix": "6.0.6",
"lodash": "^4.17.20",
"material-design-icons-iconfont": "^6.4.1",
"resolve-url-loader": "^3.1.2",
"roboto-fontface": "^0.10.0",
"sass": "~1.32",
"sass-loader": "^11.1.1",
"vue": "^2.6.12",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-loader": "^14.2.4",
"vue-template-compiler": "^2.7.14",
"vuetify": "^2.4.2",
"vuetify-loader": "^1.7.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
}
}
**
I dont know why I got this error.
I'm new to Vue.js, can someone enlighten me to how to use and continue other's project from scratch ? I got a lot of problems, such as the Vue code not showing changes in the application in my localhost.
I create a project base on with-ant-design-less and then try to add sass to project. I change the following files:
next.config.js:
/* eslint-disable */
const withSass = require("#zeit/next-sass");
const withLess = require("#zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");
// Where your antd-custom.less file lives
const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);
module.exports = withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[folder]_[local]___[hash:base64:5]",
},
...withLess({
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: themeVariables, // make your antd custom effective
},
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === "function") {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === "function" ? [] : origExternals),
];
config.module.rules.unshift({
test: antStyles,
use: "null-loader",
});
}
return config;
},
}),
});
package.json
{
"name": "with-ant-design-less",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#zeit/next-less": "^1.0.1",
"#zeit/next-sass": "^1.0.1",
"antd": "^3.5.4",
"babel-plugin-import": "^1.7.0",
"less": "3.0.4",
"less-vars-to-js": "1.3.0",
"next": "latest",
"null-loader": "2.0.0",
"react": "^16.7.0",
"sass": "^1.26.3",
"react-dom": "^16.7.0"
},
"license": "ISC",
"devDependencies": {
"#types/node": "^13.13.1",
"typescript": "^3.8.3"
}
}
but when I run the project I get the following error:
[ error ] ./pages/index.module.scss
To use Next.js' built-in Sass support, you first need to install `sass`.
Run `npm i sass` or `yarn add sass` inside your workspace.
Although I'm looking for better solution to setup the project because in this way all the style will be in one big chunk that cause performance issue.
Any idea? Thanks
next.config.js:
const withPlugins = require('next-compose-plugins');
const withCss = require('#zeit/next-css');
const withSass = require('#zeit/next-sass');
const withLess = require('#zeit/next-less');
const lessToJS = require('less-vars-to-js');
const fs = require('fs');
const path = require('path');
const lessThemeVariablesFilePath = './static/ant-theme-variables.less';
const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, lessThemeVariablesFilePath), 'utf8'),
);
const lessNextConfig = {
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: themeVariables,
},
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === 'function') {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === 'function' ? [] : origExternals),
];
config.module.rules.unshift({
test: antStyles,
use: 'null-loader',
});
}
return config;
},
};
const sassNextConfig = {
cssModules: true,
cssLoaderOptions: {
localIdentName: '[path]___[local]___[hash:base64:5]',
},
};
module.exports = withPlugins([
[withLess, lessNextConfig],
[withSass, sassNextConfig],
]);
babel config:
module.exports = {
presets: ['next/babel'],
plugins: [
['import', { libraryName: 'antd', style: true }],
],
};
I use sass, less and css. it depends on your requirement. and you can add your custom variables in an static file as I did.
hope be helpful.
So, for people who came here just for the basic addition, you can add antd to your nextjs app by installing antd
npm i antd
and then you can add the antd styles to your
_app.js file
after your global styles:
import 'antd/dist/antd.css'
I am using just the basic Spectron test file (in Typescript) to open my app, get the window count, and presumably exit. However, Spectron's app.stop() only seems to close the dev tools window and leaves the main window running. I've searched around and come across a few GitHub issues with people having this problem. The best people seem to offer is to use pkill. I don't want to do that as it could potentially kill more than it should (on a CI server, for example).
Before I show all the code, my question is, what do I need to do to make Spectron's session actually exit after a test?
Here's my spec.ts containing my tests:
import { Application } from "spectron";
import * as assert from "assert";
import * as electronPath from "electron";
import * as path from "path";
describe('Application launch', function () {
this.timeout(10000);
beforeEach(function () {
this.app = new Application({
path: electronPath,
args: [path.join(__dirname, '..')]
} as any);
return this.app.start();
})
afterEach(function () {
if (this.app && this.app.isRunning()) {
// TODO: figure out way to close all windows
return this.app.electron.app.quit();
}
});
it('shows an initial window', function () {
return this.app.client.getWindowCount().then(function (count: any) {
//assert.equal(count, 1)
// Please note that getWindowCount() will return 2 if `dev tools` are opened.
assert.equal(count, 2);
});
});
});
Here's my package.json:
{
"main": "dist/js/entry/main.js",
"scripts": {
"build": "node_modules/.bin/tsc -p tsconfig.json && mkdir -p dist/static && rsync -ar --delete static/ dist/static/",
"lint": "node_modules/.bin/tslint -c tslint.json -p tsconfig.json",
"start": "node_modules/.bin/electron .",
"build_start": "npm run build && npm start",
"package": "node_modules/.bin/electron-builder",
"package-test": "node_modules/.bin/electron-builder --dir",
"test": "node_modules/.bin/mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/*.ts"
},
"devDependencies": {
"#types/chai": "^4.1.4",
"#types/mocha": "^5.2.4",
"ajv": "^6.5.1",
"asar": "^0.14.3",
"chai": "^4.1.2",
"electron": "^2.0.3",
"electron-builder": "^20.16.0",
"ignore-styles": "^5.0.1",
"jasmine": "^3.1.0",
"jsdom": "^11.11.0",
"jsdom-global": "^3.0.2",
"mocha": "^5.2.0",
"spectron": "^3.8.0",
"ts-node": "^7.0.0",
"tslint": "^5.10.0",
"typescript": "^2.9.2"
},
"build": {
"appId": "your.id",
"files": [
"dist/**/*"
],
"directories": {
"output": "build"
},
"linux": {
"category": "Video",
"target": [
"deb",
"snap"
]
}
},
"dependencies": {
"#types/core-js": "^2.5.0",
"moment": "^2.22.2",
"winston": "^3.0.0"
}
}
Here's my main.ts:
import { app, BrowserWindow, ipcMain, crashReporter } from "electron";
import * as path from "path";
process.env.ELECTRON_PROCESS_NAME = "main";
import { initLogger } from "../common/logging";
let log = initLogger();
log.info("=== Starting up ===");
let mainWindow: Electron.BrowserWindow = null;
function createMainWindow() {
if (mainWindow === null) {
mainWindow = new BrowserWindow({
height: 600,
width: 800,
});
mainWindow.loadFile(path.join(__dirname, "../../static/ui.html"));
mainWindow.webContents.openDevTools();
}
}
app.on("ready", createMainWindow);
app.on("window-all-closed", () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== "darwin") {
log.info("Exiting...");
app.quit();
}
});
app.on("activate", () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
createMainWindow();
});
A simple solution is to disable devtools because they wont be in your final version anyway. You could add a "--debug" argument (parsed in main.js) and add it to the "start" script in package.json. Then, the devtools wont open in your test if you don't add the argument.
If you want to keep devtools or just be sure to exit your app, you can stop your main process with the Node.js exit() function which is a bit brutal:
afterEach(function () {
if (this.app && this.app.isRunning()) {
this.app.mainProcess.exit(0);
}
});
I choose to have a mix of both disabling devtools and be sure to exit (to prevent any bug in my app that could prevent to exit). I'm not familiar with Mocha beceause I use AVA instead and I work in JS instead of TS. So I tried to adapt this code but there may be some mistakes:
beforeEach(function () {
this.app = new Application({
path: electronPath,
// you could add --debug in the following array
// don't do it, to keep the devtools closed
args: [path.join(__dirname, '..')]
} as any);
return this.app.start();
})
// use ES8 'async' to be able to wait
afterEach(async function () {
if (this.app && this.app.isRunning()) {
// get the main process PID
let pid = this.app.mainProcess.pid;
// close the renderer window using its own js context
// to get closer to the user action of closing the app
// you could also use .stop() here
await this.app.client.execute(() => {
window.close();
});
// here, the app should be close
try {
// check if PID is running using '0' signal (throw error if not)
process.kill(pid, 0);
}
catch(e) {
// error catched : the process was not running
// do someting to end the test with success !
return;
}
// no error, process is still running, stop it
this.app.mainProcess.exit(1);
// do someting to end the test with error
return
}
});
Try this
app.on('window-all-closed', () => {
// prevent quit on MacOS. But also quit if we are in test.
if (process.platform !== 'darwin' || isTest) {
app.quit();
}
});
And isTest is const isTest = process.env.NODE_ENV === 'test';
Then the app will properly quit!
To get process.env.NODE_ENV, you may need to update your webpack to use DefinePlugin:
new webpack.DefinePlugin({
'process.env.NODE_ENV': `"${process.env.NODE_ENV ?? 'production'}"`,
// global: {},
}),
With latest Electron, you have to open your Window with contextIsolation set to false.
const win = new BrowserWindow({
...,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
})
I have added jasmine-marbles to my project and I am getting error messages like this:
Expected $[0].frame = 20 to equal 70.
Expected $[0].notification.kind = 'E' to equal 'N'.
Expected $[0].notification.value = undefined to equal LoadSuccess().
instead of something like this:
Expected
{"frame":50,"notification":{"kind":"N","value":{"payload":"[
...
to deep equal
{"frame":40,"notification":{"kind":"N","value":{"payload":"[
...
Test:
it('should loadData$', () => {
const action = new LoadRequest('123');
const completion = new LoadSuccess({});
actions$.stream = hot('-a', { a: action });
const response = cold('-a|', { a: {} });
const expected = cold('---c', { c: completion });
client.loadData = () => response;
expect(effects.loadData$).toBeObservable(expected);
});
package.json:
"devDependencies": {
"jasmine-core": "^2.3.4",
"jasmine-marbles": "^0.2.0",
"jasmine-spec-reporter": "^3.2.0",
"karma": "1.4.1",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.0.0",
"karma-jasmine": "^1.1.0",
"karma-mocha-reporter": "^2.2.5",
"karma-remap-istanbul": "0.2.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "2.0.2",
...
How to fix the test failure message? Is it related to some karma reporter / plugin / missing library?
See package.json,
"jasmine": "^2.5.3",
"jasmine-core": "~2.5.2",
I don't know if it makes a difference.
I have been searching for answer an all weekend. To no avail. I have been down the webpack rabbit hole with elixir 6 and back to browserify.
This gist here looked promising: 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'];
However elixir.config.js.babel is undefined — why is that? Was there a refactor done? I can't get it working.
All I want to do is enable stage-2. (https://babeljs.io/docs/plugins/preset-stage-2/)
My gulp file
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});
// }
}
I have a .babelrc file
{
"presets": ["stage-2"],
"comments": true
}
Which seems to be ignored.
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"
}
}
Edit 29-08-2016
So a simple test:
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 }
Causes this error:
[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
This one helped me with similar issue:
Original (c) #michael-hsu https://stackoverflow.com/a/38194213/741782
You should override exactly babelify transformer:
elixir.config.js.browserify.transformers
.find(transformer => transformer.name === 'babelify')
.options = {
presets: ['es2015', 'react', 'stage-0', 'stage-1', 'stage-2'],
plugins: ['transform-class-properties'],
};