轉譯js
- 安裝套件
babel-loader
和@babel/core
和@babel/preset-env
套件
babel-loader
是webpack的loader套件
@babel/core
調用babel的api編譯
@babel/preset-env
可以使用最新版本的javascript去編譯
$ npm i babel-loader @babel/core @babel/preset-env -D
- 在
webpack.config.js
新增:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
const path = require('path');
module.exports = {
entry: './src/js/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: './js/main.js',
clean: true,
},
module: {
rules: [
{
test: /\.js$/, //找尋js副檔名的檔案(正規表達式)
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets:['@babel/preset-env']
},
}
}
]
}
}
|
- 在
src
底下新增all.js
檔,並在檔案裡隨便寫一些程式:
1
2
3
|
const greet = (name = 'Jack') => {
return `Hello, ${name}!`;
};
|
you project
├─── node_modules/
├─── src/
│ │
│ ├─── index.html
│ │
│ └──── js/
│ │
│ ├── main.js
│ │
│ └── all.js //新增一支js檔
│
├─── package.json
└─── webpack.config.js
- 在
main.js
引入這支all.js
檔:
- 在終端機執行:
$ npm run start
you project
├─── dist/
│ │
│ └─── js/
│ │
│ └── main.js
│
├─── node_modules/
├─── src/
│ │
│ ├─── index.html
│ │
│ └──── js/
│ │
│ ├── main.js
│ │
│ └── all.js //新增一支js檔
│
├─── package.json
└─── webpack.config.js
- 可以在編譯出來的
dist
檔底下的main.js
看到轉譯的結果:
1
|
eval("var greet = function greet() {\n var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Jack';\n return \"Hello, \".concat(name, \"!\");\n};\n\n//# sourceURL=webpack:///./src/js/all.js?");
|
若要使用jquery
- 安裝套件
jquery
:
$ npm i jquery
- 在
main.js
引用:
1
|
import '../../node_modules/jquery.min.js'
|
- 在
webpack.config.js
新增:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
const webpack = require('webpack'); //引用webpack-cli內的工具
const path = require('path');
module.exports = {
entry: './src/js/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: './js/main.js',
clean: true,
},
module: {
rules: [
{
test: /\.js$/, //找尋js副檔名的檔案(正規表達式)
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets:['@babel/preset-env']
},
}
}
]
},
plugins: [
new webpack.ProvidePlugin({ //全域設置$變數
$: 'jquery',
jquery: 'jquery',
'window.jquery': 'jquery'
})
]
}
|
- 測試
jquery
有沒有載入成功,可以在先前的all.js
:
1
2
3
|
$(document).ready(function(){
$("body").css('backgroundColor','red')
})
|
- 再次終端機執行:
$ npm run start
- 如果頁面整個有成功變成
紅色
,表示成功。
其他相關