1. 什么是@jsenv/core？
@jsenv/core是一个开源的npm包，用于JavaScript开发。它提供了一个现代的JavaScript开发和构建工具链，以提高开发和生产效率。
它可以帮助你完成以下操作：
- 将ES6+标准的JavaScript代码转换成与所有浏览器兼容的JavaScript代码。
- 支持TypeScript编译。
- 自动添加浏览器前缀、压缩代码等操作。
- 支持多页面开发，提供了类似webpack的功能。
具体来说，@jsenv/core提供了一个jsenv.config.js的配置文件，我们可以在此配置一些webpack中需要用到的基础设置，比如entry、output等。此外，@jsenv/core还可以编译CSS和HTML文件。
2. 安装
安装@jsenv/core可以使用npm，具体命令如下：
npm install @jsenv/core --save-dev
3. 常用命令
初始化
在项目根目录下执行以下命令，可以生成一个默认的jsenv.config.js配置文件和相关目录和文件。
npx @jsenv/core init
启动本地服务器
npx @jsenv/core server
这个命令会启动本地的开发服务器，在本地测试、开发项目。
构建
npx @jsenv/core build
这个命令会将所有源代码编译成浏览器可用的生产代码，并输出到jsenv.build/目录下。
观察
npx @jsenv/core watch
这个命令会监视源代码的变化，每次有更新就重新编译，并实时更新浏览器上的效果。
4. 使用
配置文件
在项目根目录下，创建jsenv.config.js文件。
export const jsenvConfig = {
projectDirectory: __dirname,
};这是一个最基本的配置文件，它告诉@jsenv/core到哪里找到我们的项目。
我们还可以添加一些其他的配置选项，如下：
-- -------------------- ---- -------
------ ----- ----------- - -
----------------- ----------
-------------------------- -----------------
-------------- -
------------------- -----------------
--
-------------------- -
----------------------------------- -------------
--
------------ ---------------------
----------- ---------------------
--------------------- ---------------------
--其中，buildDirectoryRelativeUrl指定编译输出的目录，entryPointMap指定了入口点，browserTransformMap指定对浏览器无法识别的模块进行转换，cssFileUrls、jsFileUrls、htmlFileRelativeUrls分别指定css、js、html文件的路径。
编译
@jsenv/core默认会编译所有符合条件的文件，编译后的文件会放在jsenv.build/目录下。
监视文件变化
在开发过程中，我们需要经常修改源代码，@jsenv/core提供了一个功能，在保存时自动编译代码，而不用手动运行命令。
npx @jsenv/core watch
开发服务器
我们可以使用@jsenv/core提供的开发服务器，来在本地测试网站。
npx @jsenv/core server
这个命令会启动一个本地服务器，默认在http://localhost:8080上监听。
其他
@jsenv/core提供了若干其他功能，如更改命令行选项、原生函数的polyfill、调试等等，这里不再赘述，感兴趣的读者可以查阅官方文档。
5. 示例代码
以初始化一个项目为例，我们可以通过@jsenv/core快速生成一个项目的基本目录和文件。
npx @jsenv/core init
这个命令会生成以下文件：
project/ ├── jsenv.config.js ├── src/ │ ├── index.html │ └── index.js ├── .gitignore └── package.json
其中：
jsenv.config.js为配置文件。src/index.js为JavaScript源文件。src/index.html为HTML源文件。
最后，我们使用以下命令进行编译：
npx @jsenv/core build
编译完成后，在jsenv.build/目录下生成了index.js、index.html和index.css等文件，我们可以上传这个目录到服务器上并运行，来查看效果。
6. 总结
@jsenv/core是一个功能强大的npm包，能够提高我们的开发效率。它可以自动转换ES6+标准的JavaScript代码，支持TypeScript编译、自动添加浏览器前缀、压缩代码等。我们可以通过它来快速初始化一个项目，并通过控制台命令进行开发、构建和监视源代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/94993