请教一下Babel编译出的文件单独在浏览器中跑时

我把babel编译出的多个文件在浏览器环境单独使用,并且在head中引用了polyfill,然后发现代码都能跑,但是每个文件都会有_defineProperties、_createClass之类的定义代码。想请教一下怎么优化这些代码,能把它们直接去掉或者移到单独的一个文件中去吗?

我用@babel/runtime和@babel/plugin-transform-runtime试过,但是它们好像都是在工程化环境中引用core-js之类的相关工具包,如果在浏览器能不能也全局引用一下所有的工具代码库,然后去掉每个文件的冗余定义呢?

我知道webpack之类的工具能帮你打包处理相关文件引入的问题,但是如果不依赖其它工具能解决吗,感觉babel自身应该有相关的配置,有哪位Babel大佬知道怎么配置的吗?

阅读 2.5k
1 个回答

嗯,终于解决了。
先要安装一个处理编译helpers方法的插件:

npm install --save-dev babel-plugin-external-helpers

并写入配置:

{
  "plugins": ["external-helpers"]
}

这样编译出的文件中就没有奇怪的那一坨了,
然后使用命令生成一个单独的工具库:

babel-external-helpers > ./babel-helpers.js

最后在浏览器中引入这个库就可以了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏