Noteworthy Programs Map

    require-extension-vue

    1.3.2 • Public • Published

    npm npm npm Travis CI bitHound Code Greenkeeper badge Twitter

    require-extension-vue

    A require hook for loading single-file vue component in Node with Browser environment.

    What's it?

    1. Your project is running in Node with Browser environment. (Electron etc.)

    2. The expected feature you want, like runtime:

    // app.vue
    <script>
    export default {
        // ...
    };
    </script>
    <template>
        // ...
    </template>
    <style>
        // ...
    </style>
    import 'require-extension-vue';
    // From now on, you can import or require a single-file vue component.
    import app from './app.vue';
    // This object is what you export. (include attributes: data, computed, created etc.)
    // <template> will be exported in app.template as String.
    // <style> will be appended to document.head, if you have Browser environment.

    3. Do what you like.

    new Vue(app).$mount('app');

    Getting started

    $ npm install --save require-extension-vue
    

    or, You want a quick start. (use-vue)

    Usage

    Simple

    import 'require-extension-vue';
    import app from './app.vue';
     
    new Vue(app).$mount('app');

    Config

    import loader from 'require-extension-vue';

    #loader.style.register

    Register language to compile style.

    loader.style.register('scss', ( content, filePath, index ) => {
        // compile
        return content;
    });
    <style lang="scss">
        // sass code
    </style>

    #loader.style.set

    Set a default language.

    loader.style.set('scss');
    <style>
        // No need to Declare lang="scss" any more
        // sass code
    </style>

    #loader.style.exports

    Append styles to where you like.

    loader.style.exports(function ( style, { index, styles, filePath } ) {
        document.head.appendChild(style);
    });

    #sync

    Compile handler should return content sync, includes <template>, <script> and <style>.

    #async

    Deprecated, @see

    API

    #Register

    register ( lang : String, handler : Function ) => this

    handler ( content : String, filePath : String, index : Number ) => content : String

    loader.style.register / loader.script.register / loader.template.register

    #Set

    set ( lang : String ) => this

    loader.style.set / loader.script.set / loader.template.set

    #Exports

    exports ( handler : Function ) => this

    handler ( style : Element, options : Object ) { this : Vue } => void

    options { index : Number, styles : Array<Element>, filePath : String }

    loader.style.exports

    Notice

    In the following case, as the import synax like Variable Hosting:

    import loader from 'require-extension-vue';
    loader.script.register('babel', handler).set('babel');
    import app from './app.vue';

    The above case is equal to the following case:

    import loader from 'require-extension-vue';
    import app from './app.vue';
    // Your config behavior is after require, so it is not working.
    loader.script.register('babel', handler).set('babel');

    There're two way to avoid:

    You can use require instead of import.

    import loader from 'require-extension-vue';
    loader.script.register('babel', handler).set('babel');
    let app  = require('./app.vue');

    Put the config behavior in one file.

    import 'require-extension-vue';
    import './require-extension-vue-config.js';
    import app from './app.vue';
    // require-extension-vue-config.js
    let loader = require.extensions['.vue'];
    loader.script.register('babel', handler).set('babel');

    Scoped

    Support scoped, like vue-loader. @see

    #Mind you

    This feature require css-what.

    But, it is defective. @see

    If your class name includes # (>, etc), it can not parse to correct AST selector.

    Todo

    • source map.

    License

    MIT

    Install

    npm i require-extension-vue

    DownloadsWeekly Downloads

    6

    Version

    1.3.2

    License

    MIT

    Last publish

    Collaborators

    • lixinliang