今天要把 bpmn-modeler.development.js 打包压缩成ie可以是识别的代码 es5 bpmn-modeler.min.js
刚开始用的是babel的打包，但是babel打包后不能识别promise
于是就想到了很久没有用到的webpack ，可是webpack已经审计到4了，好多都跟之前的不一样了。于是开启疯狂的百度模式，下面把我遇到的问题整理一下，仅供参考，也方便以后使用；
NO1：Note: The code generator has deoptimised the styling of …… as it exceeds the max of "500KB".
解决方法：在.babelrc文件中写入："compact": false,
{ "compact": false, "presets": [ [ "@babel/preset-env", { "debug": true, "useBuiltIns": "usage", "targets":{ "browsers":["> 1%", "last 2 versions", "not ie <= 8"] } } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 2 } ] ] }
NO2：WebPack 警告WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).解决
解决方法：在webpack.config.js里面添加如下蓝色部分
const path=require(‘path‘); module.exports = { // 生产环境 mode: ‘production‘, entry: { ... }, // 之前提到的唯一入口文件 output: { ... }, // 指定loader module: { ... }, performance: { hints: "warning", // 枚举 maxAssetSize: 30000000, // 整数类型（以字节为单位） maxEntrypointSize: 50000000, // 整数类型（以字节为单位） assetFilter: function (assetFilename) { // 提供资源文件名的断言函数 return assetFilename.endsWith(‘.css‘) || assetFilename.endsWith(‘.js‘); } } }
网上有说可以添加
performance: { hints:false }
本人没有尝试，感兴趣的小伙伴可以试试。
NO3：报错：TypeError：Cannot read property ‘bindings‘ of null
解决方法：重新安装 npm install -D babel-loader @babel/core @babel/preset-env webpack ；同时修改.babelrc文件和webpack.config.js文件
webpack.config.js const path=require(‘path‘); module.exports = { // 生产环境 mode: ‘production‘, entry: { ... }, // 之前提到的唯一入口文件 output: { ... }, // 指定loader module: { // rules中的每一项是一个规则 rules:[ { test: /\.js$/, // 值一个正则，符合这些正则的资源会用一个loade来处理 use: { loader: ‘babel-loader‘, // 使用bable-loader来处理 options: { // 指定参数 presets: [ [‘@babel/preset-env‘, { targets: { browsers: [‘> 1%‘, ‘last 2 version‘] //具体可以去babel-preset里面查看 } }] ] // 指定哪些语法编译 } }, exclude: ‘/node_module/‘ // 排除在外 } ] }, performance: { ... } }
.babelrc文件 { "compact": false, "presets": [ [ "@babel/preset-env", { "debug": true, "useBuiltIns": "usage", "targets":{ "browsers":["> 1%", "last 2 versions", "not ie <= 8"] } } ] ], "plugins": [ ... ] }
这两个文件此处的名字要一致。
NO4：Requires Babel "^7.0.0-0", but was loaded with "6.26.3".
npm install --save-dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime
NO5：创建webpack打包 一级安装依赖
npm init -y "devDependencies": { "@babel/cli": "^7.10.1", "@babel/core": "^7.10.2", "@babel/plugin-transform-runtime": "^7.10.1", "@babel/preset-env": "^7.10.2", "babel-loader": "^8.1.0", "babel-preset-env": "^1.7.0", "url-loader": "^4.1.0", "webpack": "^4.43.0", "webpack-cli": "^3.3.11" }, "dependencies": { "@babel/polyfill": "^7.10.1", "@babel/runtime": "^7.10.2", "@babel/runtime-corejs2": "^7.10.2", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^26.0.1", "regenerator-runtime": "^0.13.5" }
参考文献：https://segmentfault.com/a/1190000017175671