Git Product home page Git Product logo

easywebpack-js's Introduction

easywebpack-js

NPM version build status Test coverage David deps npm download

Buiding JavaScript Lib for Webpack

Install

  • Webpack 4
$ npm i @easy-team/easywebpack-js --save-dev      // babel 7

or

$ npm i easywebpack-js --save-dev                 // babel 6

  • Webpack 3
$ npm i easywebpack-js@3 --save-dev

Document

QuickStart

Webapck Building Script

Node Build Mode

  • write webpack build config
// build/index.js
const easywebpack = require('easywebpack-js');
const config = {
  env: process.env.BUILD_ENV,
  entry: {
    'index': 'lib/index.js'
  }
};
easywebpack.build(config);
  • build script command
{
 "scripts": {
   "build:test": "cross-env BUILD_ENV=test NODE_ENV=development node build/index.js",
   "build:prod": "cross-env BUILD_ENV=prod NODE_ENV=production node build/index.js",
 }
}

easywebpack-cli

  • write easywebpack-cli for easywebpack-js solution
// ${app_root}/webpack.config.js
const easywebpack = require('@easy-team/easywebpack-js');
module.exports = {
  framework: 'js',
  entry: {
    'index': 'lib/index.js'
  }
};
  • easywebpack-cli command build
{
 "scripts": {
   "build:test": "easy build test",
   "build:prod": "easy build prod",
 }
}

Building Webpack Common Script Lib

Write React Lib Entry Code

${root}/src/react-lib.js

import React from 'react';
import ReactDOM from 'react-dom';

// window.React = React;
// window.ReactDOM = ReactDOM;

export default {
  React,
  ReactDOM
}

Webpack React Lib Building

${root}/webpack.config.js

module.exports = {
  framework: 'js',
  entry: {
    'react-lib': 'scr/react-lib.js'
  },
  output: {
    library: "ReactLib" 
  }
}

Project Webpack Config

${root}/webpack.config.js

module.exports = {
  ....
  externals: {
    'react': 'ReactLib.default.React',
    'react-dom': 'ReactLib.default.ReactDOM'
  },
}

HTML Script Link

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>React Common Lib Test</title>
    <script src="/react-lib.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Example

License

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.