告别繁琐重复的webpack配置,直接上手撸代码

大家伙有没有这么一个烦恼:

想写一些简单的前端Demo,却被繁琐的webpack配置给恶心到😿
于是乎便有了go-js的存在,我们只需要执行全局安装go-js,执行gojs指令,便可以执行前端代码

使用

执行如下bash脚本:

npm install -g go-js

mkdir workspace
cd workspace
echo "import $ from 'jquery'\n\$(document.body).html('<h1>GO\!JS\!</h1>')" > jq.js

gojs -i jq.js

于是便会自动安装 jquery 依赖,并打开浏览器,enjoy it!

概念

gojs 认为一个js文件就是一个入口(entry),也对应一个webpack compiler

特征

  1. 程序运行时,自动下载依赖包
  2. 入口动态添加
    如,文件目录结构如下:

    go-js-test/
    ├── a/
    │   ├── a/
    │   ├── jq.html
    │   ├── jq.js
    │   ├── style.css
    │   └── style.less
    ├── jq.js
    └── react.js

    1.在 go-js-test/ 下执行 gojs .
    2.请求 /jq.js
    3.添加 jq.js 至入口中, webpack building....
    4.请求 a/jq.js
    5.添加 a/jq.js 至入口中, webpack building....

  3. 颗粒化 webpack compiler 和 HMR 的处理
    在第二点(入口动态添加)中,对于jq.js和a/jq.js两个入口,分别各自对应webpack compiler 和 HMR 单元。
    也就是说,jq.js和a/jq.js是两个相互独立的webpack处理单元。
    那么这样给我们带来什么便利呢?

    1. 如果jq.js中出错,在a/jq.js中是不被察觉的。
    2. 后面加入的a/jq.js入口,不影响jq.js入口,所以之前对jq.js的webpack bundle cache是依然生效的。(对比与 一股脑将2个入口重新用一个webpack单元处理)
  4. 支持自定义loaders,在工作目录下命名文件 gojs.jsloader.js
    默认loader为:

    module.exports = [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: [
          // root
        ],
        query: {
          cacheDirectory: true,
          presets: [
            require.resolve('babel-preset-es2015'),
            require.resolve('babel-preset-react'),
            require.resolve('babel-preset-stage-0')
          ],
          plugins: [
            require.resolve('babel-plugin-transform-decorators-legacy'),
          ]
        }
      },
    
      {
        test: /\.css$/,
        exclude: [
          /\.mod\.css/,
          /\.use(able)?\.css/
        ],
        loaders: [
          'style-loader',
          'css-loader?localIdentName=[path][name]__[local]___[hash:base64:5]',
          'autoprefixer?browsers=last 2 version&remove=false'
        ]
      },
    
      {
        test: /\.use(able)?\.css$/,
        loaders: [
          'style-loader/useable',
          'css-loader?localIdentName=[path][name]__[local]___[hash:base64:5]',
          'autoprefixer?browsers=last 2 version&remove=false'
        ]
      },
    
      {
        test: /\.mod\.css$/,
        loaders: [
          'style-loader',
          'css-loader?modules&localIdentName=[path][name]__[local]___[hash:base64:5]',
          'autoprefixer?browsers=last 2 version&remove=false'
        ]
      },
    
      // .less, .mod.less, .useable.less
      {
        test: /\.less$/,
        exclude: [
          /\.mod\.less$/,
          /\.use(able)?\.less$/
        ],
        loaders: [
          'style-loader',
          'css-loader?localIdentName=[path][name]__[local]___[hash:base64:5]',
          'autoprefixer?browsers=last 2 version&remove=false',
          'less-loader'
        ]
      },
    
      {
        test: /\.use(able)?\.less$/,
        loaders: [
          'style-loader/useable',
          'css-loader?localIdentName=[path][name]__[local]___[hash:base64:5]',
          'autoprefixer?browsers=last 2 version&remove=false',
          'less-loader'
        ]
      },
    
      {
        test: /\.mod\.less$/,
        loaders: [
          'style-loader',
          'css-loader?modules&localIdentName=[path][name]__[local]___[hash:base64:5]',
          'autoprefixer?browsers=last 2 version&remove=false',
          'less-loader'
        ]
      },
    
      // 其他资源
      {
        test: /\.(jpeg|jpg|png|gif)$/,
        loader: 'url-loader?limit=10240'
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.json$/, loader: 'json-loader'
      },
      {
        test: /\.woff(\?.+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.woff2(\?.+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?.+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?.+)?$/, loader: 'file'
      },
      {
        test: /\.svg(\?.+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'
      }
    ]

适用于

适用于一些小型项目或者demo的快速搭建开发。
只需要执行gojs,就可以直接看到demo啦!

预览

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。