作为前端开发人员,我们在每一次开发新项目的过程中都需要从头开始配置项目结构与依赖,这是一件非常耗费时间的事情。在这样的情况下,npm 包 simplest-starter-ever 应运而生。
简介
simplest-starter-ever 是一个基于 webpack 的前端项目快速启动器。它可以帮助开发者快速搭建一个基于 Vue/React 的单页应用(SPA)项目,并且已经配置好了一份基础的项目结构与必要的依赖项。
simplest-starter-ever 不仅可以节省开发者的时间,而且还可以减少项目配置错误导致的 bug,让开发者专注于业务代码的编写。
安装和使用
安装
我们可以通过使用 npm 来安装 simplest-starter-ever:
npm install -g simplest-starter-ever
使用
创建一个新项目
运行以下命令:
simplest-starter-ever init
接着,你会被提示输入项目相关的信息,如项目名称(name)、项目描述(description)、作者(author)等。
? Project name *** ? Project description *** ? Version 1.0.0 ? Author *** ? Select a front-end framework(Press <space> to select) ❯ ◯ Vue ◯ React ◯ No framework
当你填写完所需信息后,可以选择使用 Vue、React 或不使用前端框架。输入完成后,simplest-starter-ever 将会自动下载相关的依赖项并创建一份基础的项目结构。
运行项目
cd *** npm run dev
运行这条命令将会启动一个开发服务器,您可以在浏览器中访问 http://localhost:8080/
观察页面效果。
打包项目
您可以使用以下命令来打包项目:
npm run build
在项目根目录下生成的 dist
目录里面会产生一份我们需要的打包文件。
高级用法
当然,除了默认的项目结构和配置项以外,simplest-starter-ever 还提供了一些高级配置选项,允许您根据您的具体需求来配置您的项目。
自定义配置
您可以修改项目根目录下的 .simplesrc
文件来进行一些自定义设置。
修改文件中的 config
键值对以配置不同的参数。例如,您可以自定义 webpack 配置项:
-- -------------------- ---- ------- - --------- - ---------- - -------- ----------------- --------- - ------- --------- ----------- ----------- - - - -
配置别名(alias)
在项目根目录下的 .simplesrc
文件中,您可以设置别名(alias)来方便您使用各种文件和模块。
{ "config": { "alias": { "@": "./src", "vue": "vue/dist/vue.esm.js" } } }
这会在项目中创建两个别名 @
和 vue
。其中,@
别名表示项目的根目录,而 vue
别名则是给 vue/dist/vue.esm.js
路径取的别名。
示例代码
Vue 项目
-- -------------------- ---- ------- ---------- ---- --------- ---- ------------------------ ----------- ------------ -- ---- ------ ------ ------ ----------- -------- ------ ---------- ---- ----------------------------- ------ ------- - ----- ------ ----------- - ---------- - - --------- ------- ---- - ------------ --------- ---------- ------ ----------- ----------------------- ------------ ------------------------ ---------- ----------- ------- ------ -------- ----------- ----- - --------
React 项目
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ---- ---- ------------- ------ ------------ -------- ----- - ------ - ---- ---------------- ------- ----------------------- ---- ---------- -------------------- ---------- -- --- ---- ----------------------- --- ---- -- ------- ---- -- -------------------- -------------------------- --------------- ------------- ----------- - ----- ----- ---- --------- ------ -- - ------ ------- ----
总结
simplest-starter-ever 的出现,极大地节省了前端开发者的时间,提高了项目配置的一致性,降低了开发过程中的风险。虽然项目中的很多细节都得由开发者自己完成,但是基础的结构和配置都已经帮我们做好了。值得一提的是,在 .simplesrc
文件中,还有许多配置项可以让开发者自由定制各种功能和选项,非常方便实用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60065f7f238a385564ab6af4