极客观点
项目管理
HarmonyOS
使用 Rollup + Babel 打包出错
场景
打包 min.js 时命令行提示下面的警告
(!) Unresolved dependencies
https://rollupjs.org/guide/en#warning-treating-module-as-external-dependency
@babel/runtime/regenerator (imported by src\module\ajax\downloadString.js, src\module\ajax\downloadUrl.js, src\module\ajax\loadResource.js, src\module\ajax\FetchLimiting.js, src\module\array\asyncFlatMap.js)
@babel/runtime/helpers/asyncToGenerator (imported by src\module\ajax\downloadString.js, src\module\ajax\downloadUrl.js, src\module\ajax\loadResource.js, src\module\ajax\FetchLimiting.js, src\module\array\asyncFlatMap.js)
@babel/runtime/helpers/toConsumableArray (imported by src\module\ajax\FetchLimiting.js, src\module\array\asyncFlatMap.js)
@babel/runtime/helpers/classCallCheck (imported by src\module\ajax\FetchLimiting.js, src\module\date\strToDate.js, src\module\event\watchEventListener.js)
@babel/runtime/helpers/createClass (imported by src\module\ajax\FetchLimiting.js)
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
@babel/runtime/regenerator (guessing '_regeneratorRuntime')
@babel/runtime/helpers/asyncToGenerator (guessing '_asyncToGenerator')
@babel/runtime/helpers/toConsumableArray (guessing '_toConsumableArray')
@babel/runtime/helpers/classCallCheck (guessing '_classCallCheck')
@babel/runtime/helpers/createClass (guessing '_createClass')
created dist\rx-util.min.js in 3.2s
Done in 5.90s.然后到浏览器之后，吾辈在 HTML 中引入打包后的 min.js 文件就会出错，而直接引入 .js 则不会
Uncaught TypeError: Cannot read property 'mark' of undefinedpackage.json
{
"name": "rx-util",
"version": "1.3.1",
"description": "rxliuli 个人使用的 js 工具库（仅适用于浏览器）",
"main": "./src/main.js",
"scripts": {
"start": "npm run build:dev",
"build:dev": "rollup -c build/rollup.config.js --environment NODE_ENV:development",
"build:prod": "rollup -c build/rollup.config.js --environment NODE_ENV:production",
"lint": "eslint --fix ./src/"
},
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/rxliuli/rx-util.git"
},
"keywords": [
"rx-util"
],
"author": "rxliuli",
"license": "MIT",
"bugs": {
"url": "https://github.com/rxliuli/rx-util/issues"
},
"homepage": "https://github.com/rxliuli/rx-util#readme",
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/plugin-transform-runtime": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"eslint": "^5.12.1",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"rollup": "^1.1.2",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-eslint": "^5.0.0",
"rollup-plugin-node-resolve": "^4.0.0",
"rollup-plugin-uglify": "^6.0.1"
}
}rollupjs 配置文件
import babel from 'rollup-plugin-babel'
// 注意，这里引入需要使用 { uglify } 而非 uglify，因为 uglify 导出自身时使用的是 exports.uglify
import { uglify } from 'rollup-plugin-uglify'
import { eslint } from 'rollup-plugin-eslint'
import { calcPath } from './util'
import dev from './rollup.config.dev'
import { name } from '../package.json'
export default [
dev,
{
// 入口文件
input: calcPath('../src/main.js'),
output: {
// 打包名称
name: 'rx',
// 打包的文件
file: calcPath(`../dist/${name}.min.js`),
// 打包的格式，umd 支持 commonjs/amd/life 三种方式
format: 'umd'
},
plugins: [
// 引入 eslint 插件，必须在 babel 之前引入，因为 babel 编译之后的代码未必符合 eslint 规范，eslint 仅针对我们 [原本] 的代码
eslint(),
// 引入 babel 插件
babel({
exclude: calcPath('../node_modules/**'),
runtimeHelpers: true
}),
// js 压缩插件，需要在最后引入
uglify()
]
}
].babelrc
{
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}吾辈将仓库放到了 GitHub 上，可以帮忙看一下是什么问题么？
附：有点绝望了，弄了两个钟还是没弄好，Babel 真的是现代前端的 JQuery。。。
好吧，最终是吾辈选择写了一个 CLI 工具以在公司里创建 SDK 时免于受到各种配置的烦恼，如果你也有这种烦恼，可以尝试一下，并欢迎报告任何错误