Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

modern js frontend development example

NotificationsYou must be signed in to change notification settings

riversun/es6hello

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

概要

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

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

/src

src/index.js

export{defaultasGreeting}from'./hello.js';

src/hello.js

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

/public

index.html

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Example</title></head><body><scriptsrc="js/app.js"></script><script>constgreeting=newcom.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

constpath=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

About

modern js frontend development example

Resources

Stars

Watchers

Forks

Packages

No packages published

[8]ページ先頭

©2009-2025 Movatter.jp