账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    使用 Rollup + Babel 打包出错
    64
    0

    使用 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 undefined

    package.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。。。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部