- 初始化專案
# 建立專案資料夾
mkdir es6-plus-practice
# 進入專案資料夾
cd es6-plus-practice
# 初始化專案
npm init -y- 安裝 babel
# 安裝 babel 核心
npm install --save-dev @babel/core @babel/cli
# 安裝 babel 解譯環境
npm i -D @babel/preset-env
# 安裝 可對老舊瀏覽器增進 Promise 功能的 polyfill
npm i -D @babel/polyfill- 設定 babel，建立 .babelrc 設定檔，內容如下：
{ "presets": ["@babel/preset-env"] }-
建立 src 和 dist 資料夾
-
查看 babel 參數
npx babel --help -
在 package.json 檔裡的 scripts 設定
{ "transpile": "npx babel src --out-dir dist" }- 在 src/app.js 新增內容：
let f = name=>{
console.log(`hello ${name}`);
};
f('bill');-
執行 npm run transpile 後，可以在 dist/app.js 看到轉譯後的 ES5 寫法。
-
安裝 webpack
npm i -D webpack
npm i -D webpack-cli
# 安裝 babel-loader
npm i -D babel-loader- 建立 build 資料夾，建立 build/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="info"></div>
<script src="bundle.js"></script>
</body>
</html>- 建立設定檔 webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.js',
mode: 'development', // development or production
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};- 修改 src/app.js
let f = name=>{
document.querySelector('#info').innerHTML = `hello ${name}`;
};
f('bill');-
執行 npx webpack 即可看到轉譯好的 build/bundle.js。以瀏覽器開啟 build/index.html 可看到執行結果。
-
安裝 webpack-dev-server
npm i -D webpack-dev-server- webpack.config.js 加入設定
devServer: {
contentBase: path.join(__dirname, 'build'),
compress: true,
port: 9000
}- 在 package.json 檔裡的 scripts 設定
{ "dev": "webpack serve" }- 執行 npm run dev 即可啟動開發環境。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent