Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

es6hello

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

es6hello

node.js+webpack4+babelのひな形となるプロジェクト

  • 1.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

node.jsでフロントエンド開発

概要

node.js+webpack4+babelのひな形となるプロジェクト

  • node.jsの環境をつかってフロントエンド開発をする
  • ブラウザなど外部から使えるようライブラリを作る
  • webpack4をつかってバンドルを作る
  • babel v7をつかって、es6記法で書いたjsコードをes5に変換する

/src

src/index.js

export { default as Greeting }  from './hello.js';

src/hello.js

   /**
    * 挨拶クラス
    * (ECMAScript 6 スタイル)
    * Helloクラスがdefaultのexport対象とする
    */
   export default class Hello {
   
       //コンストラクタ
       constructor() {
       }
   
       /**
        * 挨拶をする
        * @returns {string}
        */
       sayHello() {
           
           const hello = 'Hi, there!';
           console.log(hello);
   
           return hello;
       }
   }

/public

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
<script src="js/app.js"></script>
<script>
const greeting = new com.example.Greeting();
alert(greeting.sayHello());
</script>
</body>
</html>

/

package.json

{
  "name": "es6hello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Tom Misawa <riversun.org@gmail.com> (https://github.com/riversun)",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/riversun/es6hello.git"
  },
  "bugs": {
    "url": "https://github.com/riversun/es6hello/issues"
  },
  "homepage": "https://github.com/riversun/es6hello#readme",
  "devDependencies": {
    "@babel/core": "^7.1.5",
    "@babel/preset-env": "^7.1.5",
    "babel-loader": "^8.0.4",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  }
}

webpack.config.js

const path = require("path");

module.exports = {
    mode: 'development',
    devServer: {
        open: true,
        openPage: "index.html",
        contentBase: path.join(__dirname, 'public'),
        watchContentBase: true,
        port: 8080,
    },
    entry: {app: './src/index.js'},
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "/js/",
        filename: '[name].js',
        library: ["com", "example"],
        libraryTarget: 'umd'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "useBuiltIns": "usage",
                                    "targets": "> 0.25%, not dead"
                                }
                            ]
                        ]
                    }
                }
            }
        ]
    },
    devtool: 'inline-source-map'

};

実行する

npm start

バンドルをビルドする

npm run build

FAQs

Package last updated on 10 Nov 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc