Git Product home page Git Product logo

packing's Introduction

Packing

基于webpack的前端集成开发环境和编译环境

NPM Build Status Dependency Status devDependency Status

特点

  • 不依赖 host 文件,根据环境自动切换资源路径
  • 节约开发服务器,多分支开发部署到同一台服务器不会相互覆盖
  • 提供资源包体积分析报告
  • Version>=4.0支持babel 7。

Install

  1. 安装yogenerator-packing
npm install -g yo generator-packing
  1. 生成你的网站
yo packing
  1. 启动开发模式
npm run serve
  1. 在浏览器中预览网站 http://localhost:8081

  2. 其他命令

# 编译工程
npm run build

# 不同环境下编译工程
npm run build:dev
npm run build:beta
npm run build:prod

# 编译并预览编译结果,端口8080
npm run serve:dist

# 启动不带webpack-dashboard的开发环境
npm run serve:normal

# 启动时自动打开浏览器功能
npm run serve -- --open
npm run serve -- -o

# 启动时强制清除DLL缓存功能
npm run serve -- --clean
npm run serve -- -c

Directory

.
├── /bin/
│   ├── /packing-build.js
│   ├── /packing-serve:dist.js
│   ├── /packing-serve.js
│   └── /packing.js
├── /config/
│   ├── /packing.js              # 构建工具相关配置
│   ├── /webpack.build.babel.js  # webpack编译环境配置文件
│   ├── /webpack.dll.babel.js    # DllPlugin插件编译配置
│   └── /webpack.serve:dist.js   # webpack预览编译后结果的配置文件
├── /examples/                   # 例子
├── /src/                        # 项目代码容器目录
├── /util/                       # util
├── .babelrc                     # babel配置
├── .eslintrc.js                 # eslint配置
├── package.json
└── README.md                   

例子

packing's People

Contributors

shallinta avatar zhongzhi107 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

packing's Issues

mock返回数据为Object类型时问题

mock返回数据为Object类型时,与逾期不符

------test demo-----------

// mock => index.js
export default (req, res) => { return { me: { [Math.random()]: 1 } }; };

// template -> index.pug
script.
console.log(!{JSON.stringify(me)});

// ouput 每刷新页面一次多一个属性
{
0.877618266487793: 1,
0.3259789941366402: 1,
.....
}

packing-template-pug 23行代码 assign 方法为 merge 导致数据有误

async/await语法报错

export default async function foo() {
  var s = await bar();
  console.log(s);
}
function bar() {
  return "bar";
}

Uncaught ReferenceError: regeneratorRuntime is not defined

使用包含hooks API的react版本时,生产环境版本压缩代码后报错 TypeError: Cannot set property 'lastEffect' of null

使用react 16.7-alpha 和 16.8-alpha 版本时(with hooks),react-dom中 useEffect API相关代码压缩后,报错TypeError: Cannot set property 'lastEffect' of null.

经查是uglifyjs压缩后代码语法存在问题, 大概类似于以下情况:

// 压缩前代码(并非react-dom源代码,只是大概的抽象)
var No, e;
if (No === null) {
  No = { lastEffect: null };
  No.lastEffect = e;
} else {
  // ...
  No.lastEffect = e
}

// 经过 `[email protected] ([email protected])` 压缩后代码:(大概抽象)
No.lastEffect = null === No ? (No = { lastEffect: null }, e) : (/*...*/, e)

Uglifyjs的github仓库下已有类似issue,但尚未修复。

经测试,使用terserterser-wepback-plugin压缩工具,可以修复该问题。使用此工具压缩后代码大概类似下面:

// 使用 `[email protected]`压缩后代码:(大概抽象)
null === No ? ((No = { lastEffect: null }).lastEffect = e) : (/*...*/, No.lastEffect = e)

引用静态资源build之后相对路径替换成`_/..`;开发环境中commonChunk内引用资源文件未正确打包。

  1. 静态资源打包时./开头的相对路径替换成_/,导致build之后qzz服务器的ng无法正确转发。
  2. 在开发环境中,commonChunk中引用的资源文件通过webapck.dll打包后未能生成实体文件,导致开发环境无法正确访问.

解决方法:

  1. 可在使用时覆盖webpack.build.babel.js配置文件中的静态资源url-loader配置,改写路径。
  2. 修改dll中静态资源file-loader配置:
{
    test: new RegExp(`.(${fontExtensions.join('|')})$`, 'i'),
    loader: 'file-loader',
    options: {
      name: '[path][name].[ext]',
      publicPath: '/'
      // emitFile: false
    }
  }

提供webpackDevMiddleware配置项writeToDisk

目前对packing serve功能通过webpackDevMiddleware来实现,编译出的中间产物默认放入内存中,实际使用时有时需要引用中间产物,因此希望能够将writeToDisk放入packing.js,以便在需要时配置

const mwOptions = {
  contentBase: src,
  quiet: false,
  noInfo: false,
  hot: true,
  inline: true,
  lazy: false,
  publicPath: webpackConfig.output.publicPath,
  headers: { 'Access-Control-Allow-Origin': '*' },
  stats: { colors: true },
  serverSideRender: true,
  writeToDisk: (filePath) => {
    return /ssr\.js$/.test(filePath);
  }
};
const dllPath = join(context, tmpDll);

const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, mwOptions);

generator-packing 生成工程 postcss 默认使用 .postcssrc.js 配置 stylelint 出现警告

default.less

html,
body {
  width: 100%;
  height: 100%;
}

#root {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: auto;
  min-height: 100%;
  flex-direction: column;
}

.postcssrc.js

module.exports = {
  parser: false,
  plugins: {
    stylelint: true
  }
};

webpack.serve.babel.js 未做修改。

执行命令

npm run stylelint

执行通过,没有 lint 警告和错误

执行命令

npm run start

出现警告

cb02c92b74ab3141aca7425d3ac11d7f

warning ... : we recommend using babel-preset-env now:

安装依赖包时提示:

warning packing > [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

babel-preset-env代码已经合并到babel工程的babel/experimental/babel-preset-env/目录。

npm install babel-preset-env --save-dev

可以使用的配置:

{
  "presets": [
    [
      "env", {
        "useBuiltIns": "entry",
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "Android >= 4.4", "IOS >= 7", "ie >= 9"],
          "node": "4.0"
        }
      }
    ]
  ],

  "plugins": []
}

packing对多个webpack配置的支持问题

使用packing时,webpack.build.babel.js/webpack.serve.babel.js用户可以自行修改并返回新的webpack配置,目前只支持使用一个webpack配置对象。希望能够支持多个webpack配置,既返回数组,其中包含多个配置。如:

export default (webpackConfig/* , program, appConfig */) => {
  const config = webpackConfig;
  const ssrConfig = Object.assign({}, config);
  ssrConfig.optimization = undefined;
  ssrConfig.target = 'node';
  ssrConfig.entry = ['./src/pages/ssr-assemble.js'];
  ssrConfig.plugins = config.plugins.filter(plugin => (
    plugin.constructor.name !== 'CleanWebpackPlugin' &&
    plugin.constructor.name !== 'PackingTemplatePlugin' &&
    plugin.constructor.name !== 'VisualizerPlugin'
  ));
  ssrConfig.plugins.push(new CopySsrPlugin());

  const entryFileName = 'entry.ssr.js';
  const entryPattern = `**/${entryFileName}`;
  const cwd = path.resolve('src/pages');
  const ssrEntries = packingGlob(entryPattern, { cwd }).map((page) => (`./${page}`));
  console.log(ssrEntries);
  ssrConfig.module.rules.push({
    test: /ssr-assemble\.js/,
    use: {
      loader: path.resolve(__dirname, './assemble-modules-loader.js'),
      options: { moduleFiles: ssrEntries }
    }
  });
  ssrConfig.output = {
    libraryTarget: 'umd',
    filename: 'ssr.js',
    path: config.output.path + '/templates'
  };
  return [config, ssrConfig];
}

在entry注入polyfill后运行报错

为了兼容低版本浏览器,想在每个包中加入 polyfill.js,修改了 packing.config.path.entries,结果就报错了,修改的配置代码如下:

    entries: () => {
      const entryFileName = 'entry.js';
      const entryPath = 'src/pages';
      const entryPattern = `**/${entryFileName}`;
      const cwd = path.resolve(context, entryPath);
      const config = {};
      packingGlob(entryPattern, { cwd }).forEach((page) => {
        const key = page.replace(`/${entryFileName}`, '');
        config[key] = ['babel-polyfill', path.join(cwd, page)];
      });
      return config;
    }

报错文件:packing/lib/middleware.js
报错位置:entryPoints[chunkName].replace
报错原因:数组没有replace方法

const settingsFile = resolve(context, entryPoints[chunkName].replace('.js', '.settings.js'));
let settings = {};
if (existsSync(settingsFile)) {
  settings = requireDefault(settingsFile);
}

Can't resolve 'fs'

在引入electron的时候报错:can't resolve 'fs'

PS:fs属于node的模块

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.