项目中去除多余的console语句
使用babel-plugin-transform-remove-console插件
首先安装：
npm install babel-plugin-transform-remove-console --save-dev
然后配置babel文件：babel.config.js。因为此文件时影响全局的，若要求作用于特定环境，则可以加个判断，如下：
const prodPlugins = []
if(process.env.NODE_ENV === 'production') {
prodPlugins.push("transform-remove-console")
}
module.exports = {
presets: [
['@vue/app', {
useBuiltIns: 'entry'
}]
],
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
],
// ...prodPlugins // 使用...扩展符或从concat函数
].concat(prodPlugins)
}
CSS实现按钮节流
button{
animation: throttle 2s step-end forwards;
}
button:active{
animation: none;
}
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
Vue多入口配置步骤
1、在已有的项目中新建second.html，second.js，second.vue文件，内容与原项目的index.html，main.js，App.vue相同。
2、在build/webpack.base.conf.js文件中添加代码second: './src/second.js'
entry: {
app: './src/main.js',
second: './src/second.js'
},
3、在build/webpack.dev.conf.js文件中添加代码
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
// 原先为index，更改为app，否则原来的http://localhost:8080/#/会找不到文件
chunks: ['app']
}),
new HtmlWebpackPlugin({
filename: 'second', // 入口名，http://localhost:8080/second#/
template: 'second.html',
inject: true,
chunks: ['second']
}),
4、在build/webpack.prod.conf.js文件中添加代码
new HtmlWebpackPlugin({
filename: config.build.index,
template: "index.html",
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: "dependency"
}),
new HtmlWebpackPlugin({ // 新增入口
filename: config.build.second,
template: "second.html",
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: "dependency"
}),
5、在config/index.js中配置
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
second: path.resolve(__dirname, '../dist/second.html'), // 新增打包入口
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: false,//关闭生成map文件
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
},
到这就结束了，运行后浏览器访问http://localhost:8080/#/和http://localhost:8080/second#/。
关于react,vue控制台报错： globalThis is not defined。
近期，在一些启动项目中控制台会出现globalThis is not defined的问题，导致页面无法正常加载。通过百度后有以下检查点和处理方式。
1、检查浏览器版本，globalThis支持版本要求71以上。而我的浏览器还是70的，所以要升级版本。
2、nodejs的版本要求12+。
3、如果不想升级版本的，可以通过在index.html中添加以下脚本处理。
<script> this.globalThis || (this.globalThis = this) </script>
