babel-browser-only

1.0.1 • Public • Published

Babel Browser Only

Travis branch npm npm

Importing files only for browser. The idea is from http://stackoverflow.com/a/30355080.

TL;DR

This plugin makes you import CSS files in Isomorphic React App!

Example

In
import './css/test.css';
import './css/test.scss';
require('./css/test.sass');
require('./css/test.less');
 
import React, { Component } from 'react';
class ScheduleList extends Component {
  ...
}
Out
process.env.BROWSER && require('./css/test.css');
process.env.BROWSER && require('./css/test.scss');
process.env.BROWSER && require('./css/test.sass');
process.env.BROWSER && require('./css/test.less');
 
import React, { Component } from 'react';
class ScheduleList extends Component {
  ...
}

Usage

For Webpack

{
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        BROWSER: JSON.stringify(true)
      }
    })
  ]
}

For Babel

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["babel-browser-only"]
}

With Options

{
  "plugins": ["babel-browser-only", {
    "disregard": [".css", ".scss", ".sass", ".less"] // default
  }]
}

Via CLI

$ babel --plugins babel-browser-only script.js

Via Node API

import { transform } from 'babel-core';
transform('code', {
  plugins: ['babel-browser-only']
});

Installation

npm install --save-dev babel-browser-only

License

MIT license.

Readme

Keywords

none

Package Sidebar

Install

npm i babel-browser-only

Weekly Downloads

1

Version

1.0.1

License

MIT

Last publish

Collaborators

  • ryanroll