【Webpack】自動轉譯js版本+全域引用jQuery

轉譯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檔：

1

import './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

如果頁面整個有成功變成紅色，表示成功。

webpack

【Webpack】自動轉譯js版本+全域引用jQuery

babel-loader、@babel/core、@babel/preset-env、jquery、webpack

【Webpack】自動轉譯js版本+全域引用jQuery

babel-loader、@babel/core、@babel/preset-env、jquery、webpack

轉譯js

若要使用jquery

其他相關