jeffreyway / laravel-elixir-rollup Goto Github PK

View Code? Open in Web Editor NEW

29.0 2.0 12.0 13 KB

Official Rollup extension for Laravel Elixir. (Includes support for .vue files).

JavaScript 100.00%

laravel-elixir-rollup's Introduction

Laravel Elixir Rollup Integration

This extension brings Rollup.js support to your Laravel Elixir builds.

Install

First, ensure that you're using Laravel Elixir v6 or newer. Next, install the extension like so:

npm install laravel-elixir-rollup-official --save-dev

Use

You're all set! Open your gulpfile.js, and add:

elixir(function(mix) {
  mix.rollup('main.js');
});

This will, by default, compile resources/assets/js/main.js to public/js/main.js. Should you require a non-standard base directory for your source files, begin the path with ./. This instructs Laravel Elixir to omit any default base directories.

elixir(function(mix) {
  mix.rollup('./app/assets/js/main.js');
});

Similarly, if you require a different output directory, provide a file or directory path as the second argument to mix.rollup.

elixir(function(mix) {
  mix.rollup('main.js', 'public/build/bundle.js');
});

Now, you're specifying that you want to compile resources/assets/js/main.js to public/build/bundle.js.

If providing an array of source files, it might be useful to override the default base directory. If desired, specify a path as the third argument.

elixir(function(mix) {
  mix.rollup(['main.js', 'other.js'], null, 'app/js');
});

With this adjustment, we'll compile app/js/main.js and app/js/other.js.

Lastly, should you need to override the default Rollup configuration, you may do so by either creating a rollup.config.js file in your project root, or by passing a Rollup config object as the fourth argument to mix.rollup. You can learn more about Rollup config files here.

laravel-elixir-rollup's People

Contributors

Stargazers

Watchers

Forkers

quorrajs colynb coldbox-elixir wpdevops gameplan hikouki andrewfeeney metekabak pilishen iiviiahdisa fabis94 xavi7th

laravel-elixir-rollup's Issues

Error on Installation

On a fresh installation i get the error

npm install laravel-elixir-rollup-official --save-dev
npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "laravel-elixir-rollup-official" "--save-dev"
npm ERR! node v4.4.4
npm ERR! npm  v3.9.0

npm ERR! No compatible version found: babel-preset-es2015-webpack@^6.13.2
npm ERR! Valid install targets:
npm ERR! 6.4.2, 6.4.1, 6.4.0, 6.3.15, 6.3.14, 6.3.13, 0.0.0
npm ERR! 
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

Debug Log http://laravel.io/bin/GykGP

Rollup compilation failed after fresh installation or after package updated.

I've got this when compiling

The sourceMap option has been renamed to "sourcemap" (lowercase "m") in Rollup. The old form is now deprecated in rollup-stream. options.entry is deprecated, use options.input [10:17:44] gulp-notify: [Laravel Elixir] Rollup Compilation Failed!: Unexpected key 'moduleName' found, expected one of: acorn, amd, banner, cache, context, entry, exports, extend, external, file, footer, format, globals, indent, input, interop, intro, legacy, moduleContext, name, noConflict, onwarn, output, outro, paths, plugins, preferConst, pureExternalModules, sourcemap, sourcemapFile, strict, targets, treeshake, watch [Error: Unexpected key 'moduleName' found, expected one of: acorn, amd, banner, cache, context, entry, exports, extend, external, file, footer, format, globals, indent, input, interop, intro, legacy, moduleContext, name, noConflict, onwarn, output, outro, paths, plugins, preferConst, pureExternalModules, sourcemap, sourcemapFile, strict, targets, treeshake, watch]

it thinks it just started to happen 2 day ago.

How to use Rollup with Laravel Mix

Is there official Laravel Mix <-> Rollup support? If not, why was it dropped?
I'd like to be able to simply use ES6 modules without transpiling any code.

Suggestion: Remove jquery and bootstrap injects

Not everyone who uses rollup is using jquery and bootstrap for their project, so it's just adding extra unneeded clutter and larger files than I'd prefer.

Multiple rollup tasks overwrite files on gulp watch

I have a weird issue with multiple rollup tasks.
My elixir mix in the gulpfile.js looks a bit like this:

mix.rollup('path/to/first/app.js', 'public/js/first')
    .rollup('path/to/second/app.js', 'public/js/second');

When I execute gulp, everything is fine. I get my first app.js and my second app.js just how i want them.
Now the weird part: When I execute gulp watch, it inserts the code of the second js into the first js, so that I end up with two same JS files.

How will I be able to rollup multiple scripts into multiple scripts while also watching them?

it is possible to override rollup plugins options?

i use vue and vuex in my laravel project with object spread syntax like:

...
 computed: {
            ...mapGetters({
                ...
            })
        },
...

also i use elixir tool
i try to do it like this:

...

var rollupConf = {
  format: 'iife',
  sourceMap: true,
  useStrict: false,
  plugins: [
    nodeResolve({
      jsnext: true,
      main: true,
      browser: true
    }),
    vue(),
    json(),
    babel({
      exclude: 'node_modules/**'
    }) 
  ]
};

elixir(function(mix) {
  mix
    .rollup(
      './resources/assets/js/foo.js',
      './public/js/bar.js',
      null,
      rollupConf
    )
});

but got next error:
[Laravel Elixir] Rollup Compilation Failed!: Error transforming /foo.vue with 'buble' plugin: Object spread operator requires specified objectAssign option with 'Object.assign' or polyfill helper.

also i tried this option:

buble(
      { objectAssign: 'Object.assign()' }
    ),

and got that error again.

As i can see I can't override default rollup plugins options defined in Laravel-Elixir-Rollup plugin (only add new plugins)

Is it possible to resolve this issue?

Override multiEntry plugin

I want to override multiEntry plugin in package plugins entry but I don't saw any configuration.

Forexample :

...
plugin: {
    	multiEntry:false
    }
...

how to do this?
Thanks

TypeError: Cannot read property 'slice' of undefined

Probably there is a different version on commonjs plugin that cause error.
You may also substitute 'entry' = >'input' in RollupTask.js.

Thanks.

Update call to rollup

As of this rollup commit (rollup/rollup#1566) the moduleName option was normalized to name, as well as sourceMap renamed to lowercase sourcemap. These changes need to be reflected in the rollup call in RollupTask.js line 104:

        return rollup(
            extend({
                entry: this.src.path,
                cache: cache,
                sourceMap: true,
                format: 'iife',
                moduleName: 'LaravelElixirBundle',
                plugins: plugins
            }, this.rollupConfig, this.options)
        )
        .on('bundle', function (bundle) {
            cache = bundle;
        });

Config file unexpected token export

So, I created a rollup.config.js file in the project root, with the contents of

export default {
    entry: 'src/main.js',
    format: 'es2015',
};

my Gulpfile looks like this:

const elixir = require('laravel-elixir'); // eslint-disable-line

elixir((mix) => {
    mix.sass(['main.scss'], 'public/css/foliage.css', './sass');
    mix.rollup('./src/**/*.js', './public/src/foliage.js');
});

Upon running elixir, however, I get this error:

E:\Workspace\Webdev\Foliage Native>gulp watch
E:\Workspace\Webdev\Foliage Native\rollup.config.js:1
(function (exports, require, module, __filename, __dirname) { export default {
                                                              ^^^^^^
SyntaxError: Unexpected token export
    at Object.exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at new RollupTask (E:\Workspace\Webdev\Foliage Native\node_modules\laravel-elixir-rollup-official\dist\RollupTask.js:59:34)
    at Function.<anonymous> (E:\Workspace\Webdev\Foliage Native\node_modules\laravel-elixir-rollup-official\dist\index.js:25:5)

What went wrong here?

Option to compile all the files without create a bundle

In my current gulpfile.js i made a workaround for this.

    let files = [...];
    files.forEach((file) => mix.rollup(file));

error on usage

package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.0",
    "laravel-echo": "^1.0.5",
    "pusher-js": "^3.2.1",
    "vue": "^1.0.26",
    "vue-resource": "^1.0.2",
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-rollup-official": "^1.0.2",
    "laravel-elixir-webpack-official": "^1.0.2"
  }
}

gulpfile.js

// ...

elixir(mix => {
    mix.sass('app.scss').rollup('app.js');
});

error

{ SyntaxError: Error transforming /Users/novo/wbs_test/resources/assets/js/bootstrap.js with 'buble' plugin: 'import' and 'export' may only appear at the top level (46:0)
    at Parser.pp$4.raise (/Users/novo/wbs_test/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$1.parseStatement (/Users/novo/wbs_test/node_modules/acorn/dist/acorn.js:715:16)
    at Parser.pp$1.parseBlock (/Users/novo/wbs_test/node_modules/acorn/dist/acorn.js:981:25)
    at Parser.pp$3.parseFunctionBody (/Users/novo/wbs_test/node_modules/acorn/dist/acorn.js:2105:24)
    at Parser.pp$1.parseFunction (/Users/novo/wbs_test/node_modules/acorn/dist/acorn.js:1065:10)
    at Parser.pp$3.parseExprAtom (/Users/novo/wbs_test/node_modules/acorn/dist/acorn.js:1810:19)
    at Parser.parseExprAtom (/Users/novo/wbs_test/node_modules/buble/dist/buble.umd.js:656:26)
    at Parser.pp$3.parseExprSubscripts (/Users/novo/wbs_test/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/novo/wbs_test/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/novo/wbs_test/node_modules/acorn/dist/acorn.js:1637:21)
  pos: 1462,
  loc: Position { line: 46, column: 0 },
  raisedAt: 1468,
  snippet: '42 :  * for events that are broadcast by Laravel. Echo and event broadcasting\n43 :  * allows your team to easily build robust real-time web applications.\n44 :  */\n45 : \n46 : import Echo from "laravel-echo";\n     ^',
  toString: [Function],
  rollupTransform: true,
  id: '/Users/novo/wbs_test/resources/assets/js/bootstrap.js',
  plugin: 'buble' }

Gulp still require the installation

The rollup-official is already installed in my node_modules directory, I also tried to install the module with --global flag, but still when I run gulp --production it shows an error.

[10:58:46] Using gulpfile c:\Users\4lt3rk3y\websites\blog\gulpfile.js
[10:58:46] Starting 'all'...
[10:58:46] Starting 'sass'...
[10:58:48] Finished 'sass' after 2 s
[10:58:48] Starting 'webpack'...
[10:59:02]
[10:59:10] Finished 'webpack' after 22 s
[10:59:10] Starting 'styles'...
[10:59:10] Finished 'styles' after 259 ms
[10:59:10] Starting 'rollup'...

Installation Required

To use "mix.rollup()", please run the following command, and then trigger gulp again.

npm install laravel-elixir-rollup-official --save-dev

here's my npm version

npm: '3.10.8',
node: '6.6.0',

Am I missing something? TIA

rollup creates `public/js/all.js` file on each run

gulpfile.js

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir.config.css.minifier.pluginOptions = {
    keepSpecialComments: 0
};
elixir.config.sourcemaps = false;

elixir(mix => {
    mix
        .sass('app.scss', 'public/assets/css/app-min.css')
        .rollup(['app.js', 'extra.js'], null, 'public/assets/js/app-min.js')
    }
);

which produce

public/assets/js/app-min.js
public/js/all.js

if i removed js/all.js it will be re-added again

EDIT:
actually rollup doesn't work with array syntax
.rollup(['app.js', 'extra.js'], null, 'public/assets/js/app-min.js')
wont work

Vue 2 support?

I have been trying to get Vue 2 to work with rollup, using this elixir extension. Unfortunately it does not appear to work that well.

The problem

It appears that the rollup-plugin-vue cannot handle the Vue 2 's templates, due to the usage of with statements (assuming this is Vue 2 internal).

Possible solution

Perhaps using this plugin could resolve the issue. But not too sure about the way they are doing it.

I did attempt to use this plugin locally, by using a rollup.config.js, yet gulp fails at the import statements (import vue from 'rollup-plugin-vue2';)... uh, ... Hope that you (or someone) can help.

Relative paths on Laravel 5.3

Hello jeffrey,

I have a app.js file on resources/assets/js.

When I import a file from the same route level there is no problem, but when I try to import a file from a deeper level, gulp breaks.

This is the folder structure:

This is the app.js content:

import Config from './base/config';
import Test from './test';

console.log( Test );
console.log( Config );

The test.js and base/config.js content:

export default {
    test: 'testing message'
};

What am I missing?

Thank you very much.

Package name

I've already made an extension for Rollup, but if you want I can transfer it to you so you can have the name laravel-elixir-rollup.

Error transforming util.js with 'commonjs' plugin: Path must be a string.

 TypeError: Error transforming [...]/public/components/util/util.js with 'commonjs' plugin: Path must be a string. Received [ 'public/components/util/util.js',
  'public/components/form/validator.js',
  'public/components/util/ajax.js',
  'public/site/scripts/services/router.js',
  'public/site/scripts/services/util.js',
  'public/site/scripts/services/form-validator.js',
  'public/site/scripts/services/form-ajax.js',
  'public/site/scripts/modules/page-module.js',
  'public/site/scripts/modules/form-module.js',
  'public/site/scripts/behaviour/page-modal.js',
  'public/site/scripts/behaviour/page-navigate.js',
  'public/site/scripts/app.js' ]
    at assertPath (path.js:7:11)
    at Object.resolve (path.js:1148:7)
    at defaultResolver ([...]/node_modules/rollup-plugin-commonjs/dist/rollup-plugin-commonjs.cjs.js:49:71)
    at [...]/node_modules/rollup-plugin-commonjs/dist/rollup-plugin-commonjs.cjs.js:519:15
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at Module.runMain (module.js:577:11)
    at run (bootstrap_node.js:352:7)
    at startup (bootstrap_node.js:144:9)
    at bootstrap_node.js:467:3
  rollupTransform: true,
  id: '[...]/public/components/util/util.js',
  plugin: 'commonjs' }

Gulpfile:

    mix.rollup([
        '/components/util/util.js',
        '/components/form/validator.js',
        '/components/util/ajax.js',

        '/site/scripts/services/router.js',
        '/site/scripts/services/util.js',
        '/site/scripts/services/form-validator.js',
        '/site/scripts/services/form-ajax.js',

        '/site/scripts/modules/page-module.js',
        '/site/scripts/modules/form-module.js',

        '/site/scripts/behaviour/page-modal.js',
        '/site/scripts/behaviour/page-navigate.js',

        '/site/scripts/app.js',

    ], null, 'public');

I try to use two steps build:

mix.scripts([
        '/components/util/util.js',
        '/components/form/validator.js',
        '/components/util/ajax.js',

        '/site/scripts/services/router.js',
        '/site/scripts/services/util.js',
        '/site/scripts/services/form-validator.js',
        '/site/scripts/services/form-ajax.js',

        '/site/scripts/modules/page-module.js',
        '/site/scripts/modules/form-module.js',

        '/site/scripts/behaviour/page-modal.js',
        '/site/scripts/behaviour/page-navigate.js',

        '/site/scripts/app.js',

    ], 'public/bundle/all-es2015.js');

mix.rollup(
        'public/bundle/all-es2015.js',
        'public/bundle/all.js'
)

works fine, when i use gulp, but with --production it fails.

"Path must be a string" returned when giving an array of source files

In my gulpfile I have mix.rollup(['app.js', 'router.js']);, but this returns:

TypeError: Path must be a string. Received [ 'app/js/app.js', 'app/js/router.js' ]
    at assertPath (path.js:7:11)
    at Object.resolve (path.js:1148:7)
    at resolveId (/blahblah/my-project/node_modules/rollup/dist/rollup.js:6907:71)
    at /blahblah/my-project/node_modules/rollup/dist/rollup.js:1574:32
    at process._tickDomainCallback (internal/process/next_tick.js:129:7)

I presume this is more to do with Rollup not supporting an array of files, but the Elixir docs suggest otherwise.

rollup doesn't process .vue component <style>

Hi jeff,

I have this file

Vue.component('reports-dropdown', require('../../components/reports-dropdown.vue'));

new Vue({
    el: 'body'
});

When i use mix.rollup() it works, but the content of <style> within the reports-dropdown.vue isn't included in the output.

If i use mix.browserify() on the same file, it works plus it applies the styles within <style>