在 npm package 中添加对实验语法“classProperties”的支持

Question

I would like to publish an npm package with some functions to use it with my create-react-app project. When I import the functions from the js file inside create-react-app project, it works fine. But when I install it as an npm package I get an error: Support for the experimental syntax 'classProperties' isn't currently enabled .

I tried to add the following code to a package.json file of the npm package:

"devDependencies": {
  "@babel/plugin-proposal-class-properties": "^7.8.3"
},
"babel": {
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

But it didn't solve the issue and I get the same error.

What else do I need to add as dependencies to my npm package to be able to use it in my create-react-app project? Or is it better to rewrite the functions without such experimental syntax?

Answer 1

Based on this SO answer I did the following:

.npmignore

/src

.gitignore

/lib
/node_modules

Install Babel

$ npm install @babel/core @babel/cli @babel/preset-env --save-dev

Install @babel/plugin-proposal-class-properties

$ npm install --save-dev @babel/plugin-proposal-class-properties

package.json

"main": "lib/index.js",
"scripts": {
  "prepublish": "babel src -d lib"
},
"babel": {
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

Answer 2

You need to add plugin-proposal-class-properties in your build dependency

Working example with setup steps: https://github.com/hitsio/Node-JS-ES6

Here are the steps to Set up Babel for precompiling ES6 into JavaScript

1. Install Babel

npm install --save-dev @babel/core @babel/cli

2. Install Babel Preset & Class Properties Plugin

npm install @babel/preset-env --save-dev
npm install --save-dev @babel/plugin-proposal-class-properties

@babel/preset-env Allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

@babel/plugin-proposal-class-properties transform ES6 class synthecic sugar into JavaScript __Prototype__

3. Create .babelrc file in your project's root directory & add the following code in .babelrc

    { "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-proposal-class-properties"] }

Answer 3

If someone is working with react-native-calendars and encounters this error, follow this link.