使用Babel 7.10编译成模块JS文件而无需导入

Question

简短概述：

作为全栈Node应用程序的前端JS文件的新手，如何使用Babel 7.10？需要安装@babel/cli,@babel/core,@babel/preset-env等插件并创建配置文件。运行命令行即可。

详细内容：

我正在尝试使用最新版本的Babel（7.10.5）来编译我的网站的JS文件，而这是我第一次使用Babel。由于Babel文档似乎没有完全更新或者因为我太蠢了无法理解。

我只能生成带有“require”的JS文件，但浏览器无法理解，或者使用某些浏览器无法看到的Babel文件的“import”。我不知道该怎么做，我尝试过使用babel.config.json和.babelrc文件。我安装和卸载了各种包、插件和其他东西，但似乎都没有起作用。

我不关心模块大小或任何高级内容，我只想让我的使用es6编写的简单网站在所有浏览器中工作，基本上要使用es5。我知道我需要@babel/cli、@babel/core和@babel/preset-env，并且需要某种配置文件，然后通过命令行运行。最简单的方法是什么？

另外，我没有使用任何框架，只是纯粹的JavaScript。抱歉如果这个问题很愚蠢或者提问不当。我不能展示任何代码，因为我没有。

- ArtInLines

Answer 1

1. 安装依赖：

npm i @babel/cli @babel/core @babel/preset-env

第二步，添加.babelrc文件：

{
  "presets": [
    "@babel/preset-env"
  ]
}

3、编辑package.json文件，在本例中，请确保所有源文件在“src”目录中。

//package.json
{
  "scripts": {
    "build": "babel src --out-dir dist"
  },

4、运行脚本，生成的文件将位于“dist”目录中。

npm run build

- dunhuang