node.jsでフロントエンド開発
概要
node.js+webpack4+babelのひな形となるプロジェクト
- node.jsの環境をつかってフロントエンド開発をする
- ブラウザなど外部から使えるようライブラリを作る
- webpack4をつかってバンドルを作る
- babel v7をつかって、es6記法で書いたjsコードをes5に変換する
/src
src/index.js
;
src/hello.js
/** * 挨拶クラス * (ECMAScript 6 スタイル) * Helloクラスがdefaultのexport対象とする */ //コンストラクタ { } /** * 挨拶をする * @returns */ { const hello = 'Hi, there!'; console; return hello; }
/public
index.html
Example
/
package.json
webpack.config.js
const path = ; moduleexports = mode: 'development' devServer: open: true openPage: "index.html" contentBase: path watchContentBase: true port: 8080 entry: app: './src/index.js' output: path: path publicPath: "/js/" filename: '[name].js' library: "com" "example" libraryTarget: 'umd' module: rules: test: /\.js$/ exclude: // 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