module.exports=変数

constabc=require('abc')

export変数exportdefault変数

import{変数}from'def'// exports 変数を参照する場合importdeffrom'def'// exports default 変数を参照する場合// import { default as def } from 'def' // こうもかける

// トップレベルimportdeffrom'def'// OKif(条件分岐){// ブロック{}で囲まれている箇所はトップレベルでないimportdeffrom'def'// NG}

import('def').then(module=>{/* 処理 */})

{"type":"module","name":"node13.2","version":"1.0.0","main":"index.js","license":"MIT","dependencies":{"body-parser":"^1.19.0","express":"^4.17.1"}}

import{defaultasexpress}from'express'import{defaultasbodyParser}from'body-parser'constapp=express()constwrap=(fn)=>(req,res,next)=>fn(req,res,next).catch(err=>{console.error(err)if(!res.headersSent){res.status(500).json({message:'Internal Server Error'})}})process.on('uncaughtException',(err)=>console.error(err))process.on('unhandledRejection',(err)=>console.error(err))process.on('SIGINT',()=>process.exit(1))app.use(express.static('dist'))app.use(bodyParser.urlencoded({extended:true}))app.use(bodyParser.json())app.get('/api',wrap(async(req,res)=>{res.json('hello world!!')}))app.listen(3000,()=>{console.log('Access to http://localhost:3000')})

$ node app.js 
(node:62642) ExperimentalWarning: The ESM module loader is experimental.
Access to http://localhost:3000

{"plugins":["@babel/plugin-proposal-optional-chaining"],"presets":[["@babel/preset-env",{"useBuiltIns":"usage","corejs":3,"modules":false}]]}

module.exports=function(api){api.cache(true)// この変換設定関数をキャッシュするconstpresets=[["@babel/preset-env",{"useBuiltIns":"usage","corejs":3,"modules":false}]]constplugins=["@babel/plugin-proposal-optional-chaining"]return{presets,plugins}}

# package.json作成$ npm init -y# babelのコマンドラインツールのインストール$ npm install @babel/core @babel/cli 
# babelのプラグインのインストール$ npm install @babel/plugin-proposal-optional-chaining
# polyfill系$ npm install @babel/preset-env core-js regenerator-runtime

constmessage={hello:'Hello',world:'world!'}console.log(message?.hello+''+message?.world)

$ babel index.js --out-file out.js

varmessage={hello:'Hello',world:'world!'};console.log((message===null||message===void0?void0:message.hello)+''+(message===null||message===void0?void0:message.world));

module.exports={entry:'./path/to/my/entry/file.js'};

constpath=require('path');module.exports={entry:'./path/to/my/entry/file.js',output:{path:path.resolve(__dirname,'dist'),// 出力するフォルダ名filename:'my-first-webpack.bundle.js'// 出力するメインファイル名}};

constpath=require('path');module.exports={output:{filename:'my-first-webpack.bundle.js'},module:{rules:[{test:/\.txt$/,use:'raw-loader'}]}};

constHtmlWebpackPlugin=require('html-webpack-plugin');//installed via npmconstwebpack=require('webpack');//to access built-in pluginsmodule.exports={module:{rules:[{test:/\.txt$/,use:'raw-loader'}]},plugins:[newHtmlWebpackPlugin({template:'./src/index.html'})]};

module.exports={mode:'production'};

├── dist
├── index.html
├── package.json
├── src
│   └── index.tsx
├── tsconfig.json
└── webpack.config.js

{"name":"test","version":"1.0.0","license":"MIT","scripts":{"start":"run-p check-types webpack","check-types":"tsc -w","webpack":"webpack --watch"},"devDependencies":{"@babel/cli":"^7.7.4","@babel/core":"^7.7.4","@babel/plugin-proposal-optional-chaining":"^7.7.4","@babel/preset-env":"^7.7.4","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","babel-loader":"^8.0.6","core-js":"^3.4.2","html-webpack-plugin":"^3.2.0","npm-run-all":"^4.1.5","react":"^16.12.0","react-dom":"^16.12.0","regenerator-runtime":"^0.13.3","typescript":"^3.7.2","webpack":"^4.41.2","webpack-cli":"^3.3.10"}}

importReactfrom'react'importReactDOMfrom'react-dom'constmessage={hello:'Hello',world:'world!'}constApp:React.SFC<{message:string}>=(props)=>{return<h1>{props.message}</h1>
}ReactDOM.render(<Appmessage={`${message?.hello}${message?.world}`} />,
  document.getElementById('root')
)

{"compilerOptions":{/*トランスパイル後のECMAScriptのバージョン*/"target":"ES2019",/*相対パスではないモジュールはnode_modules配下を検索する*/"moduleResolution":"node",/*今回、トランスパイルはBabelが行うので、`tsc`コマンドでJavaScriptファイルを出力しないようにする*/"noEmit":true,/*厳格な型チェックオプション（noImplicitAny、noImplicitThis、alwaysStrict、strictBindCallApply、strictNullChecks、strictFunctionTypes、strictPropertyInitialization）を有効化する*/"strict":true,/*各ファイルを個々のモジュールとしてトランスパイルする。Babelでは技術的制約で、ネームスペースなどのファイルを跨いだ構文を解釈してトランスパイルできない。このオプションを有効にすれば、BabelでトランスパイルできないTypeScriptの構文を検出して警告を出す*/"isolatedModules":true,/*ESmodules形式以外の、CommonJS形式などのモジュールをdefaultimport形式で読み込める例）constmodule=require('module')->importmodulefrom'module'*/"esModuleInterop":true,/*Reactの場合、JSX文法のチェックを有効にする*/"jsx":"react"},"include":["src/**/*"]}

constHtmlWebpackPlugin=require('html-webpack-plugin')constpath=require('path')module.exports={mode:'development',// 開発モードビルドentry:'./src/index.tsx',// ビルド対象のアプリケーションのエントリーファイルdevtool:"source-map",// ソースマップを出力するための設定、ソースマップファイル（.map）が存在する場合、ビルド前のソースファイルでデバッグができるoutput:{path:path.resolve(__dirname,'dist'),// 出力するフォルダ名(dist)filename:'bundle.js'// 出力するメインファイル名},module:{rules:[{test:/\.ts(x?)$/,// .ts .tsxがbabelのビルド対象exclude:/node_modules/,// 関係のないnode_modulesはビルドに含めないuse:{loader:'babel-loader',// babeloptions:{presets:[// polyfillのpreset['@babel/preset-env',{useBuiltIns:'usage',corejs:3,modules:false// ECMAScript向けビルド}],// reactのpreset'@babel/preset-react',// typescript→javascript変換のpreset'@babel/preset-typescript'],// optional-chaining文法を使うためのプラグインplugins:['@babel/plugin-proposal-optional-chaining']},}}]},plugins:[newHtmlWebpackPlugin({template:'./index.html'})// ビルドしたbundle.jsをindex.htmlに埋め込む]}

<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>タイトル</title></head><body><divid='root'></div><!-- webpackビルドが完了するとHtmlWebpackPluginによりビルド済みのbundle.jsが埋め込まれる --><!-- <script type="text/javascript" src="bundle.js"></script></body> --></body></html>

$ npm start

webpack is watching the files…

Hash: e532e63e7e9060154c4e
Version: webpack 4.41.2
Time: 1350ms
Built at: 2019-11-25 17:56:00
        Asset       Size  Chunks                   Chunk Names
    bundle.js    1.1 MiB    main  [emitted]        main
bundle.js.map   1.26 MiB    main  [emitted] [dev]  main
   index.html  326 bytes          [emitted]        
Entrypoint main = bundle.js bundle.js.map
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main}[built]
[./src/index.tsx] 495 bytes {main}[built]
    + 65 hidden modules
Child html-webpack-plugin for"index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 484 bytes {0}[built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0}[built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0}[built]
        + 1 hidden module
[17:56:01] Found 0 errors. Watching for file changes.