❤
npm
Sign UpSign In

@lxjx/zero

1.4.14 • Public • Published

ZERO

Features

  • 配置和业务文件隔离 ，无须触碰任何一行配置文件即可获得完善的开发体验

  • 基于babel plugin的typescript配置，编译更快

  • 支持通过配置文件zero.config.js对一些非常常用的特性进行自定义配置

  • 多页面应用开发

  • 不限于react，也可以编写常规js或ts项目



快速上手

安装cli工具

全局安装zero cli, 也可以本地安装并使用npx命令。

npm install @lxjx/zero -g

⚠ 注意: 由于内置了sass支持，可能会出现node-sass安装报错，可参考以下方式解决

// linux、mac 下
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass

// window 下
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ && npm install node-sass


创建项目

安装完成后，切换到你要创建项目的目录，执行list命令查看项目类型列表:

zero list

# -> 输出如下
λ zero list
ZERO: template list:
- js-spa            javascript单页应用
- ts-spa            typescript单页应用
- js-mpa            javascript多页应用
- ts-mpa            typescript多页应用

然后根据你想要创建的项目类型：

zero create ts-spa my-zero-app

创建完成后，进入项目目录执行npm install安装依赖并允许开发服务即可进行开发



开发服务

完成依赖安装后，通过以下命令启动开发服务

yarn start

# 对应package.json中的start命令
"scripts": {
	"start": "zero start",
}


构建生产包

yarn build

# 对应package.json中的build命令
"scripts": {
	"start": "zero start",
}

编译完成后，生成文件在根目录dist夹下

快速原型开发

如果全局安装zero，可以通过直接指定入口文件和模板文件来启动服务或编译生产文件，非常适合写一些demo或原型。


创建入口文件

在工作目录新建以下文件:

模板文件支持html和pug, 这里你也可以使用index.pug

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

main.js

支持js、jsx，如果开启了typescript支持，它还可以是ts、tsx。如果不使用react，你也可以用它打包普通js文件。

document.getElementById('root').innerHTML = 'hello world';


启动开发服务

在这里，start后的两个参数分别用于指定入口文件和模板文件。

默认的入口文件是 cwd()/src/main , 模板文件是cwd()/index.html，如果按此规则放置文件，则可以省略命令为 npx zero start

💡 cwd() 为你的工作目录

npx zero start ./main.js ./index.html


添加静态资源

这里的静态资源指的是不想通过webpack进行打包的项目文件，默认约定它们存放于cwd()/public/目录中，让我们来测试它。

mkdir public

添加一些静态资源到public目录下, 现在我们的目录如下

├─ node_modules
├─ index.jsx
├─ index.module.scss
├─ index.html
├─ logo.jpg
├─ package.json
└─ public
	├─ lodash.4.5.0.js

模板文件中使用

您可以在模板文件中这样访问它, (请确保一定要使用PUBLIC变量，因为PUBLIC目录根据开发模式以及配置的不同是会时刻改变的)

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
+  <script src="<%= PUBLIC %>/lodash.4.5.0.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

如果模板使用的是pug则使用如下

doctype html
html(lang="zh-CN")
  head
  	meta(charset="UTF-8")
    title Document
    script(src="#{PUBLIC}/lodash.4.5.0.js")

  body
    #root

js文件中使用

img.setAttribute('src', `${PUBLIC}/xxx.jpg`) // 直接通过环境变量‘PUBLIC’


cli命令

安装zero后，可以通过zero -h查看帮助信息, 要查看对应命令的帮助信息，使用zero <commond> -h，如zero start -h。



typescript

使用zero craete ts-spa projectName 进行typescript项目创建

💡 项目根目录存在tsconfig.json文件即视为开启typescript



zero.config.js

通过项目根目录的zero.config.js, 可以对一些常用的配置项进行配置, 以下为默认配置

const defaultConfig = {
  publicPath: '/', // 资源访问路径, 当需要编译后的文件能本地直接访问时，可以设置为./
  publicDirName: 'public', // 公共资源文件夹，存放不想通过webpack编译的东西，打包后所有打包产物和该目录下的文件会被移动outputPath下的同名目录下
  outputPath: './dist', // 文件打包到此目录, 以当前工作目录为根目录

  entry: './src/main', // 默认入口文件位置，只在没有设置pages的情况下生效
  template: './index.html', // 默认模板文件位置，只在没有设置pages的情况下生效

  /**
   * 开启多页面支持
   * 开启后，会以指定规则读取cwd()/src/pages下的文件作为入口，规则如下:
   * 1. 以第一级目录下的直接子目录名作为入口名
   * 2. 将作为入口名目录下的同名(jsx?|tsx?)文件作为入口文件，同名的(pug|html)文件作为模板文件
   * 3. pageInfo.(js|ts)中的导出会作为模板变量(pageInfo)传入模板文件中，可以使用对应的模板语法获取
   * 4. 直接子目录下的js以'_'开头进行命名可以避免改文件被误识别为入口文件，直接子目录内部的任何子目录不受以上规则影响
   * */
  pages: false, // 支持命令行

  /** 存在pageIncludes 且 length > 0时，只有该配置内指定的入口会生效，如['user', 'about']。当页面过多时可以在开发时进行配置以提升编译速度 */
  // pageIncludes: [],

  mock: false, // dev模式下使用, 开启mock服务, 支持命令行

  proxy: {}, // 配置dev-server代理
    
  // 配置一些环境变量
  env: {
    // development: { /* 请勿使用PUBLIC作为key，因为它已经被占用 */ },
    // production: { /* 请勿使用PUBLIC作为key，因为它已经被占用 */ }
  },
  host: '0.0.0.0', // dev模式下使用, 支持命令行
  hash: true, // 打包时为文件生成hash
  htmlHash: false, // 打包时给html的引用资源打上hash(src="/app/app.js?6d635080fd6cd30bb150") 默认dev模式下默认开启，build模式自动关闭。可以通过此选项强制开启
  gzip: true, // 是否开启gzip，支持命令行
  analyzer: true, // 是否分析包大小，支持命令行
  dropConsole: true, // 是否在打包时移除console，支持命令行
  sass: { // 传递给sass-loader的options
    // prependData: '@import "@/style/_base/index.scss";',
    sassOptions: {
      // data: '@import "@/style/_base/index.scss";',
      precision: 3
    }
  },
  less: {
    javascriptEnabled: true,
  }, // 传递给less-loader的options
  pug: {}, // 传递给pug-loader的options
  extensions: ['.ts', '.tsx', '.js', '.jsx'],
  alias: { // 同webpackOptions.alias
    '@': path.resolve(process.cwd(), './src')
  },
  /* 工作目录根目录存在tsconfig.json时视为开启typescript支持 */

  // 可通过此方法简单的自定义webpack配置, 请确保将修改后的config正确返回
  configWebpack(webpackConfig, { isDevelopment, isProduction }) {
    // if (!this.pages && isProduction) {
    //   webpackConfig.output.filename = 'myApp.js';
    // }
    return webpackConfig;
  },
  /**
   *  添加额外的babel预设和插件
   *
   *  # 默认配置
   *  presets:
   *  @babel/preset-env
   *  @babel/preset-react
   *
   *  # plugins
   *  @babel/plugin-transform-runtime
   *  @babel/plugin-proposal-optional-chaining
   *  @babel/plugin-proposal-class-properties
   *  @babel/plugin-proposal-decorators
   *  @babel/plugin-syntax-dynamic-import
   *  react-hot-loader/babel
   *  styled-jsx/babel -> styled-jsx-plugin-sass
   *
   *  # 当开启了ts时, 额外包含
   *  @babel/preset-typescript
   *  */
  babel: {
    presets: [],
    plugins: [],
  },
  /* 额外的babel-loader include列表 */
  extraBabelIncludes: [],
};


开发多页面程序

通过以下配置，可以开启多页面支持

pages: true,

开启后，会以指定规则读取cwd()/src/pages下的文件作为入口，规则如下:

  1. 以第一级目录下的直接子目录名作为入口名

  2. 将作为入口名目录下的同名(jsx?|tsx?)文件作为入口文件，同名的(pug|html)文件作为模板文件

  3. pageInfo.(js|ts)中的导出会作为模板变量(pageInfo)传入模板文件中，可以使用对应的模板语法获取

  4. 直接子目录下的js以'_'开头进行命名可以避免改文件被误识别为入口文件，直接子目录内部的任何子目录不受以上规则影响

pages目录结构如下：

└─ pages
	└─ index
		├─ index.js
		├─ index.html
		├─ pageInfo.js // 可选，导出的数据会作为模板变量传入index.html中
	└─ about
		├─ about.js
		├─ about.pug // 可以两种模板语法混合使用

你可以直接使用命令行zero create ts-mpa创建多页应用骨架

当页面很多时，可以通过pageIncludes配置来避免对当前开发环节外的页面进行编译，从而提高编译速度



eslint

首先，不推荐使用webpack来检测代码风格，只要确保目录下包含eslint配置文件，然后正确的安装了对应依赖，即可通过vscode或idea获得eslint检测，编辑器对错误的提示比控制台更加直观且不会造成编辑器和webpack同时检测代码风格引起的性能浪费。

如果你使用cli来生成项目的话，确保你的编辑器开启了eslint即可，其他的一切都是开箱式的。

typescript

通过eslint和typescript插件可以获得非常好的代码风格支持。如果你通过cli创建的ts项目，那这也是默认支持的。

  • 不要使用tslint，它的规则相对较少并且仓库正在跟eslint进行合并。

Readme

Keywords

none

Package Sidebar

Install

npm i @lxjx/zero

Repository

github.com/Iixianjie/zero

Homepage

github.com/Iixianjie/zero#readme

Weekly Downloads

1

Version

1.4.14

License

MIT

Unpacked Size

541 kB

Total Files

94

Last publish

Collaborators

  • lixianjie
Try on RunKit
Report malware