告别繁琐重复的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('
GO\!JS\!
')" > jq.js

# 执行并打开浏览器 /jq.js
gojs -i jq.js
# 以 jq.js 为入口文件进行打包，将打包进入当前目录下的 .dist/ 文件夹
gojs -b jq.js

同时支持自定义html模板，在同级目录下新建 jq.html 便会使用 jq.html 作为模板

于是便会自动安装 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啦！

预览

• 效果预览（爱奇艺）
• 效果预览（Youtube）

最后，欢迎各位 star！