僅使用 Webpack 和 Babel 生成 ES6（或 ES2022）代碼
[英]Generate ES6 (or ES2022) code ONLY with Webpack & Babel
問題描述
我繼承了一個遺留項目，它使用了舊版本的 Babel 和 Webpack。
它不使用更新的 javascript 構造，例如類、async/await。
我想重構它的代碼以使用這些現代結構。 我取得了部分成功。
我首先使用以下工具升級了 babel 包：
npx babel-upgrade --write
然后我更改了我的babel.config.js （附在下面）以針對 Chrome 97，因為它使 Babel 接受帶有 async/await 的“現代”代碼。
但是，null 合並運算符（？？）仍然需要插件。 我以為 Babel 會檢測到這一點並根據需要添加一個插件？
當我運行npm build dev時，Babel 有什么辦法可以自動包含我需要的任何插件嗎？ （package.json定義腳本如下）
或者（作為最后的手段）有沒有辦法讓 Webpack 根本不調用 babel，並且在不轉換它們的情況下捆綁源和模塊？
你能告訴我我可以刪除哪些 NPM 包嗎，因為我認為我包含了太多與 Babel 相關的包（我繼承的東西）。
這是我的 babel.config.js：
return {
"presets": [
[
"@babel/preset-env",
Object.assign({}, process.env.NODE_ENV === "test"
? {
"loose": true,
"targets": {
"node": 8,
"browsers": [">0.25%","not IE 11"]
}
}
: {
"useBuiltIns": "entry",
"corejs": "3.8",
targets: {
chrome: 97 // January 2022 - supports async/await
},
"modules": false
}
)
]
],
"plugins": [
["@babel/plugin-transform-react-jsx", {
"pragma": "h"
}],
"@babel/plugin-proposal-class-properties",
["module:fast-async", { "spec": true }]
]
}
};
這是我的 packages.json。 我懷疑有一些我不需要的與 babel 相關的包。
NPM run dev 用於構建腳本並將其與 webpack 捆綁在一起。
{
"name": "scts-expenses",
"version": "0.1.0",
"description": "",
"scripts": {
"build": "webpack --config tools/webpack/config/build",
"ci": "webpack --config tools/webpack/config/integration",
"dev": "webpack --config tools/webpack/config/dev",
"lint": "node_modules/.bin/eslint src -c .eslintrc --ext js",
"start": "npm run dev",
"test": "node_modules/.bin/jest",
"watch-dev": "webpack --config tools/webpack/config/integration --watch"
},
"author": "SCTS",
"license": "MIT",
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/node": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-object-rest-spread": "^7.12.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-object-assign": "^7.12.1",
"@babel/plugin-transform-react-jsx": "^7.12.12",
"@babel/preset-env": "^7.12.11",
"autoprefixer": "^9.8.6",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.2.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bluebird": "^3.7.2",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.2",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-jest": "^23.20.0",
"eval": "^0.1.4",
"fast-async": "^6.3.8",
"filemanager-webpack-plugin": "^2.0.5",
"imagemin-webpack-plugin": "^2.4.2",
"jest": "^24.9.0",
"jest-axe": "^3.5.0",
"mini-css-extract-plugin": "^0.8.2",
"node-sass": "^4.14.1",
"postcss": "^7.0.35",
"postcss-css-variables": "^0.13.0",
"postcss-custom-properties": "^9.2.0",
"postcss-loader": "^3.0.0",
"preact": "^10.5.7",
"preact-render-to-json": "^3.6.6",
"preact-render-to-string": "^5.1.12",
"sass-loader": "^8.0.2",
"style-loader": "^1.3.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"@microsoft/applicationinsights-web": "^2.5.10",
"abortcontroller-polyfill": "^1.7.1",
"core-js": "^3.24.1",
"custom-event-polyfill": "^1.0.7",
"element-closest-polyfill": "^1.0.2",
"es6-object-assign": "^1.1.0",
"form-request-submit-polyfill": "^2.0.0",
"picturefill": "^3.0.3",
"promise-polyfill": "^8.2.0",
"regenerator-runtime": "^0.13.9",
"unfetch": "^4.2.0",
"url-search-params-polyfill": "^8.1.0"
}
}
最后，這是我的 Webpack 4 配置。 我無法升級到最新的 Webpack package，嘗試時出現錯誤消息。 我不認為這些設置是 100% 兼容的。
const base = require('../base');
const path = require('path');
const merge = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
// const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const paths = require('../../../../paths.config');
module.exports = [
merge(base.main, {
output: {
filename: 'static-entry.js',
path: path.join(process.cwd(), paths.integrationOutput),
libraryTarget: `umd`
},
mode: 'development',
plugins: [
new FileManagerPlugin({
onEnd: {
delete: [path.join(process.cwd(), paths.integrationOutput, 'static-entry.js')]
}
}),
new MiniCssExtractPlugin({
filename: path.join(paths.dest.css, 'index.css'),
chunkFilename: '[id].css',
ignoreOrder: false,
}),
new CopyWebpackPlugin([{
from: path.join(process.cwd(), paths.src.assets),
to: path.join(process.cwd(), paths.integrationOutput, paths.dest.assets)
}]),
new CopyWebpackPlugin([{
from: path.join(process.cwd(), paths.src.img),
to: path.join(process.cwd(), paths.integrationOutput, paths.dest.img)
}]),
new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
],
}),
merge(base.javascript, {
output: {
filename: '[name].js',
publicPath: paths.webpackPublicPath,
path: path.join(process.cwd(), paths.integrationOutput, paths.dest.js)
},
mode: 'development',
devtool: 'source-map',
plugins: [
new CleanWebpackPlugin()
]
})
];
0 個解決方案
使用webpack，ES6和Babel進行調試
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.