New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket

es6hello_practice

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_practice

## 概要

latest
Source
npmnpm
Version
1.0.0
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 03 Jan 2019

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