Rollup babel编译类属性插件的问题

Rollup babel编译类属性插件的问题

 

我有一个NPM依赖包“calendar-dates”。它是用RollUp.js打包的(“RollUp”的将来)。

当我在用RollUp来实验一个javascript特性“CLASS  propertie transform”（一个ES7 class的静态属性申明）的时候，我遇到了以下问题.

 

[!] (commonjs plugin) SyntaxError: Unexpected token

 

$ rollup -c

src/index.js → dist/calendardates.cjs.js, dist/calendardates.esm.js...
[!] (commonjs plugin) SyntaxError: Unexpected token (8:20) in c:\misc\sources\Github\throwaway.CalendarDates\src\index.js
src\index.js (8:20)
 6:   // 4. getDateMatrixWithMetadataAsync
 7:
 8:   static monthTypes = {
                        ^
 9:     PREVIOUS: "previous",
10:     CURRENT: "current",

error An unexpected error occurred: "Command failed.
Exit code: 1
Command: C:\\WINDOWS\\system32\\cmd.exe
Arguments: /d /s /c rollup -c
Directory: c:\\misc\\sources\\Github\\throwaway.CalendarDates
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "c:\\misc\\sources\\Github\\throwaway.CalendarDates\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

 

我接下来给你展示我是怎么解决这个错误的

（我将假设你已经熟悉ES6的静态类属性和RollUp）

 

在我遇到这个问题之前：

 

我的主要的类CalendarDates申明和一个静态属性monthTypes。"monthTypes"导致导致了一个问题。

 

class CalendarDates {
  static monthTypes = {
    PREVIOUS: "previous",
    CURRENT: "current",
    NEXT: "next"
  };

  getDates() {
  ...
  }
  ...
}

 

我按照babel类熟悉编译插件作为这个项目的依赖。

 

yarn add --dev babel-plugin-transform-class-properties

和添加transform-class-properties 插件在.babelrc文件里面

{
  "presets": [["env", { "modules": false }]],
  "plugins": ["external-helpers", "transform-class-properties"]
}

 

以下是我的原始rollup.config.js文件

 

import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import babel from "rollup-plugin-babel";
import uglify from "rollup-plugin-uglify";

export default {
  input: "src/index.js",
  output: [
    {
      file: "dist/calendardates.cjs.js",
      format: "cjs",
      name: "calendar-dates"
    },
    {
      file: "dist/calendardates.esm.js",
      format: "es",
      name: "calendar-dates"
    }
  ],
  plugins: [
    resolve(),
    commonjs(),
    uglify(),
    babel({
      exclude: "node_modules/**"
    })
  ]
};

 

 

这个把src/index.js文件作为一个入口

 

1.解析包（resolve（））

2.转变CommonJS成ES6(commonjs())

3.压缩当前包(uglyfy())

4.转变ES6成ES5（babel（））；

 

最后输出两个文件

 

1.calendardates.cjs.js-公共JS模块-使用rquire（）导入文件

1.calendardates.esm.js -ES6模块-使用import（）导入文件

 

以上的逻辑仍然可以工作的，直到我增加了类熟悉编译插件(静态属性)

 

我是怎么解决它的：

 

它暴露了我的逻辑直属解决了一半。

我的做法是在代码流进commonjs（）之前使用Babel编译。

// From
plugins: [
  resolve(),
  commonjs(),
  uglify(),
  babel({
    exclude: "node_modules/**"
  })
]

// To
plugins: [
  resolve(),
  babel({
    exclude: "node_modules/**"
  }),
  commonjs(),
  uglify()
]

 

 

在Babel编译ES6代码成ES6代码基础上，接着commonjs（）编译这个ES5到ES6，所以依赖包可以在ES6代码里面使用import

这个追加插件的次序非常重要！

这里是我修改之后的结果。

> yarn build
yarn run v1.5.1
$ rollup -c

src/index.js → dist/calendardates.cjs.js, dist/calendardates.esm.js...
created dist/calendardates.cjs.js, dist/calendardates.esm.js in 1.5s
Done in 3.50s.

如果你有相同的问题，我希望你能做到。

 

离别致词：

是的,移动插件的这个方法是简单的。

学习到一些事情，这个插件排序是重要的。

我只是猜改变这个排序，因为我之前经常在ASP.NET Cor和Express中使用中间件。

似乎很多编程观念(concepts)可以在很多不同地方发现到和使用。

这里是这个更新只有的rollup.config.js的链接.

 

原文:https://www.slightedgecoder.com/2018/05/15/rollup-js-issue-commonjs-plugin-syntaxerror-unexpected-token/