Rollup babel编译类属性插件的问题
我有一个NPM依赖包“calendar-dates”。它是用RollUp.js打包的(“RollUp”的将来)。
当我在用RollUp来实验一个javascript特性“CLASSpropertie transform”（一个ES7 class的静态属性申明）的时候，我遇到了以下问题.
[!] (commonjs plugin) SyntaxError: Unexpected token
$ rollup -csrc/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 -csrc/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的链接.
【Rollup babel编译类属性插件的问题】原文:https://www.slightedgecoder.com/2018/05/15/rollup-js-issue-commonjs-plugin-syntaxerror-unexpected-token/
